CSS之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;

• 1

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

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

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

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

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

  从上往下排。

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

  从下往上排。

2.flex-wrap设置项目是否换行排列。

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

• 1

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

• 1

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

5.align-items

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

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

• 1

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

6.align-content

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

Flex项目属性

a.order

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

order: ;

b.flex-grow

定义项目的放大比例，默认为0（不放大）。

flex-grow: ;

c.flex-shrink

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

flex-shrink: ; 

d.flex-basis

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

flex-basis:  | auto;

e.flex

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

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

f.align-self

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

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