Flex布局

Flex布局

常用的布局方式有3种：

• display:css内联和块级布局。
• position:绝对、相对定位布局。
• float:浮动布局。

传统的布局方式存在一个很明显的问题，那就是垂直居中不易实现。

flex:弹性盒子布局，可以更好的实现响应式布局。

Flex的使用

Flex容器

任何容器都可以flex布局。Flex容器的所有子元素也自动成为容器的成员，成为Flex项目。Flex容器默认存在2根轴线（水平主轴和垂直交叉轴）,布局就是根据这2根轴来排列项目显示的。

块级元素：display:flex;

内联元素：display:inlne-flex;

使用了flex布局后，项目的float、clear、vertical-align都将失去效果。

Flex容器属性

1.flex-direction

设置项目的排列方向。

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

• row（默认值）：主轴为水平方向，起点在左端。

  从左往右排。如果超出容器宽度，容器会根据项目的宽度进行等比缩放

• row-reverse：主轴为水平方向，起点在右端。

  从右往左排，如果超出容器宽度，容器会根据项目的宽度进行等比缩放

• column：主轴为垂直方向，起点在上沿。

  从上往下排。

• column-reverse：主轴为垂直方向，起点在下沿。

  从下往上排。

2.flex-wrap

设置项目是否换行排列。

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

• nowrap（默认值）：不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。

3.flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

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

4.justify-content

设置项目的水平对齐方式。

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

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5.align-items

设置项目垂直方向对齐方式。

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

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content

当项目定义了横竖2根轴的时候生效，相当于justify-content和align-items的简写。

Flex项目属性

a.order

定义项目的排列顺序，值越小越考前，默认为0。

order: <integer>;

b.flex-grow

定义项目的放大比例，默认为0（不放大）,大于0则自动填充剩余区域，大于0的时候照数值大小的倍数填充相应区域。例如2个平级div，一个flex-grow:1,另一个flex-grow:2，则第一个div是第2个div的2倍宽度，且2个div共同填充满剩余宽度。如果数值都相等且大于0，那么久平分剩余区域。

flex-grow: <number>; 

c.flex-shrink

定义项目的缩小比例，默认为1，如果空间不足将自动缩小。

不能和flex-wrap共用，如果项目换行，那么缩小的计算方式将无法生效。

flex-shrink: <number>; 

d.flex-basis

定义项目主轴空间，相当于设置width，默认为auto。

flex-basis: <length> | auto;

e.flex

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

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex:auto => flex:1 1 auto;
flex:none =>flex:0 0 auto;
flex:1 => flex:1 1 0%;
当设置 flex:1时，如果子元素宽度的和大于了父元素的宽度，将自动缩小子元素，若果子元素宽度的和小于父元素宽度，则自动放大子元素。
所以如果遇到了定宽的子元素，一样要单独设置flex-shrink:0,否则它将随父元素改变而改变。

f.align-self

定义项目的对齐方式。可覆盖align-items。默认值：auto。

align-self: auto | flex-start | flex-end | center | baseline | stretch;