CSS布局之弹性布局

Flex(弹性布局)，是一种响应式布局，能自动伸缩盒模型达到自适应的效果。

弹性布局由弹性容器(flex container)和弹性项目(flex item)组成。

在弹性容器中，水平方向称为主轴(main axis)(起点main start,终点main end)；垂直方向称为纵轴(cross axis)(起点cross start,终点cross end)。

在弹性项目中，元素的宽度称为main size，高度称为cross size。

弹性容器

通过display: flex属性，可将元素声明块级弹性容器；通过dsplay: inline-fex，可将元素声明为行内弹性容器。

1. flex-direction属性

flex-direction指定主轴(main cross)的方向，即元素排列的方向。

// 需先声明为flex布局
flex-direction: row | row-reverse | column | column-reverse

// 属性解释：
row: 水平方向，从左往右
row-reverse: 水平方向，从右往左
column: 垂直方向，从上往下
column-reverse: 垂直方向，从下往上

2. flex-wrap属性

flex-wrap属性，指定弹性项目的换行方式，即弹性项目超过一行时如何换行。

flex-wrap: no-wrap | wrap | wrap-reverse

// 属性解释：
no-wrap: 不换行(默认)
wrap: 正常换行
wrap-reverse: 换行，第一行在下方，从下往上换行

3. flex-flow属性

flex-flow属性，为flex-direction和flex-wrap的合并属性。

// 第一个为flex-direction,第二个为flex-wrap
flex-fow: <flex-direction> <flex-wrap>

4. justify-content属性

justify-content属性，指定弹性内容在主轴上的排列方式。

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

// 属性解释：
flex-start: 从主轴起点(main start)到主轴终点(main end)
center: 居中
flex-end: 从主轴终点(main end)到主轴起点(main start)
space-between: 项目周围的空间相等，但空隙会折叠
space-between: 项目周围的空间相等，但空隙不折叠

5. align-items属性

align-items属性，指定弹性项目在纵轴上的对齐方向。

align-items: flex-start | center | flex-end | base-line | stretch

// 属性解释：
flex-start: 项目对齐纵轴的起点(cross start)
center: 居中
flex-end: 项目对齐纵轴的终点(cross end)
baseline: 基于基线对齐
stretch: 拉伸(默认)，从起点(cross start)到终点(croos end)

6. align-content属性

align-content属性，指定当主轴(main axis)随项目换行时，多条主轴线如何对齐。

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

// 属性解释：
flex-start: 从纵轴起点(cross start)到终点(cross end)
center: 居中
flex-end: 从纵轴终点(cross end)到纵轴起点(cross start)
space-between: 项目周围的空间相等，但空隙会折叠
space-between: 项目周围的空间相等，但空隙不折叠
stretch: 拉伸(默认)，拉伸项目以布满纵轴长度

7. 为什么没有justify-items属性呢？

尽管flex看起来像二维布局，但其实是个一维布局，纵轴(cross axis)没有换行(wrap)的行为，自然就没有justify-items属性。

弹性项目

尽管弹性容器已经有设置弹性项目的各种布局行为，但总有个别弹性项目需要自定义布局方式。

1. order属性

order属性，指定弹性项目的排列序号，数值越小越靠前。

order: <integer>

2. flex-grow属性

flex-grow属性，指定弹性项目在有空余空间的放大比例。

// 默认为0：表示即使有剩余空间也不放大
flex-grow: <number>

3. flex-shrink属性

flex-shrink属性，指定弹性项目在空间不够时的缩小比例。

// 默认为1：表示空间不够时项目将缩小
flex-shrink: <number>

4. flex-basis属性

flex-basis属性，指定弹性项目的基本长度。

flex-basis: <length>

5. flex属性

flex属性，为flex-grow、flex-shrink和flex-basis的合并属性。

flex: flex-grow,flex-shrink,flex-basis
// 补充：
默认: 0,1,auto
auto: 1,1,auto
none: 0,0,auto

6. align-self属性

align-self属性，指定弹性项目在纵轴上的对齐方式，将覆盖掉弹性容器的align-items属性。

align-self: auto flex-start | center | flex-end | base-line | stretch

// 属性解释：
auto: 自动
flex-start: 项目对齐纵轴的起点(cross start)
center: 居中
flex-end: 项目对齐纵轴的终点(cross end)
baseline: 基于基线对齐
stretch: 拉伸(默认)，从起点(cross start)到终点(croos end)