flex布局一览

Flex 布局一览

父元素属性

flex-direction : 容器内元素排列方向

flex-direction: row ：默认值沿水平主轴从左到右排列

flex-direction: row ：沿水平主轴从右到左排列

flex-direction: column ：沿垂直主轴从上到下排列

flex-direction: column-reverse ：沿垂直主轴从下到上排列

flex-wrap : 容器内元素是否换行

flex-wrap: nowrap ：默认值不换行

flex-wrap: wrap ：换行，第一行在上面

flex-wrap: wrap-reverse ：换行，第一行在下面

flex-flow : 简写

flex-flow: row nowrap ：flex-direction属性和flex-wrap属性的简写

justify-content : 元素在主轴的对齐方式

justify-content: center ：元素在主轴上居中

justify-content: flex-start ：元素在主轴上左对齐或上对齐

justify-content: flex-end ：元素在主轴上右对齐或下对齐

justify-content: space-between ：元素在主轴上两端对齐，元素之间间隔相等

justify-content : space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items : 元素在交叉轴上对齐方式

align-items : flex-start ：交叉轴的起点对齐（上面或左边）

align-items : flex-end ：交叉轴的终点对齐（下面或有右边）

align-items：center ：交叉轴的中点对齐

align-items：stretch ：默认值、如果元素未设置高度或设为auto，将占满整个容器的高度

1
height:auto

2
height:auto

3
height:auto

4
height:auto

align-items：baseline ：以元素的第一行文字的基线对齐

1
height: auto; line-height: 25px

2
height: auto; line-height: 25px

3
height: auto; line-height: 25px

4
height: auto; line-height: 25px

align-content : 多根轴线对齐方式。如果元素只有一根轴线，该属性不起作用。

align-content:stretch ：默认值，轴线占满整个交叉轴

align-content: flex-start ：从交叉轴开始位置填充

align-content: flex-end ：从交叉轴结尾位置填充

align-content: center ：与交叉轴中点对齐

align-content: space-between ：与交叉轴两端对齐，轴线之前的间隔平均分布

align-content: space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

子元素属性

order : 设置或检索弹性盒模型对象的子元素出现的順序。数值越小，排列越靠前，默认为0

1 order:4

2 order:1

3 order:7

4 order:9

5 order:2

6 order:8

7 order:3

8 order:6

flex-grow : 属性用于设置或检索弹性盒子的扩展比率。默认为0，即如果存在剩余空间，也不放大。

1 flex-grow:1

2 flex-grow:10

3 flex-grow:1

flex-shrink :指定了 flex 元素的收缩规则。默认为1，flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

1 flex-shrink:0

2 flex-shrink:0

3 flex-shrink:0

4 flex-shrink:1

flex-shrink :用于设置或检索弹性盒伸缩基准值。它的默认值为auto，即它的本来大小。

4 flex-shrink: 600px

flex-basis :用于设置或检索弹性盒伸缩基准值。它的默认值为auto，即它的本来大小。

4 flex-basis: 600px

flex : 简写

flex:0 1 auto。 flex-grow, flex-shrink 和 flex-basis的简写，后两个属性可选。默认值为：flex:0 1 auto。

align-self : 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self : auto | flex-start | flex-end | center | baseline | stretch;

1
align-self: baseline;

2
align-self:flex-end;

3
align-self:flex-start;

4
align-self:center;