赞赏作者
扫一扫支付
韶华小苑 |

时光不负终不老

您现在的位置是: 首页 >

flex布局

flex布局

作者:小美女 日期:2020-09-15 点击:3

flex,弹性布局,即可以灵活的布局元素,但是首先需要注意的是,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

.content {
    display: flex;
}

我最经常用到的语法是justify-content,space-around和sapce-between,它们都可以把子元素平均的分布,区别只是左右两边是否有边距,它还有flex-start,flex-end,center等属性。

.content {
    display: flex;
    justify-content: space-around;
    // justify-content: space-between;
}

最近用到的一个属性是flex-direction:column;当需要子元素上下排列时即可使用,且可以居中对齐。
它还有column-reverse,row,row-reverse属性,即主轴的排列方向。

.content {
    flex-direction: column;
}

flex-wrap属性,是否换行,默认不换行,nowrap,当你想要子元素占多行时需要用到这个属性,可以做出九宫格等等的效果。

.content {
    flex-wrap: wrap;
}

align-items属性,一个命令就可以让元素水平居中,使用起来超方便的。

.content {
    align-items: center;
}

最后修改时间:2020-09-15 23:06:55

瞅我来气不?用红包砸死我吧