flex弹性布局属性

首先使用flex布局需要声明,任何一个容器都可以指定为Flex布局。

.box{

display: flex;}

容器有六个属性可以设置

        flex-direction

        flex-wrap

        flex-flow

        justify-content

        align-items

       align-content

1.flex-direction属性决定主轴的方向(即项目的排列方向)。

.box {

flex-direction: row | row-reverse | column | column-reverse;}

2。 flex-wrap

.box{

flex-wrap: nowrap | wrap | wrap-reverse;}

3.flex-flow

.box {

flex-flow:<flex-direction> || <flex-wrap>;}

4. justify-content

justify-content属性定义了项目在主轴上的对齐方式。

.box {

justify-content: flex-start | flex-end | center | space-between | space-around;}

5.align-items属性定义项目在交叉轴上如何对齐。

.box {

align-items: flex-start | flex-end | center | baseline | stretch;}

6.align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.box {

align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

欢迎分享本文,转载请保留出处:前端ABC » flex弹性布局属性

赞 (1)
分享到:更多 ()

发表评论 0