韶华小苑 |

时光不负终不老

您现在的位置是: 首页 > 文章 >

flex布局

flex布局

小美女 2020-09-15 暂无评论 暂无分类 8

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;
}

本文链接: https://hw13.cn/d8b22c2de9acefebfc96cbe8453e725c.html 最后修改时间: 2020-09-15 23:06:55

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

赞赏作者
扫一扫支付