一，flex弹性盒子布局

1. flex弹性盒子介绍
   弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
2. 弹性容器定义，通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
3. flex弹性盒子组成
   弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

二，flex弹性容器总结表

属性说明	属性	属性值
启用Flex 布局	display	flex
主轴的方向	flex-direction	row（默认值 水平）/ row-reverse / column（垂直）/ column-reverse
水平方向对齐方式	justify-content	flex-start（默认值）/ flex-end / center / space-between / space-around
垂直方向对齐方式	align-items	stretch（默认值）/ center / flex-end / baseline / flex-start
flex-direction, flex-wrap 的简写	flex-flow	flex-flow ( flex-direction（方向值） ，flex-wrap（ 换行值）)
子元素是否换行	flex-wrap nowrap	nowrap（默认值）/ wrap / wrap-reverse
多(行)根轴线的对齐方式	align-content	stretch（默认值）/ flex-start / center / flex-end / space-between / space-around

属性说明	属性/属性值
子元素放大的比例	flex-grow: 0（默认值）
子元素缩小的比例	flex-shrink: 1（默认值
子元素宽度	flex-basis: auto（默认值）
前三者的混合写法	flex: auto (1 1 auto) 和 none (0 0 auto) / 自定义写一个值即可
子元素排列顺序	order: 0（默认值）

三，flex 弹性父盒子

使用弹性布局，首先需要在父元素通过设置 display: flex ，将其定义为弹性容器。下面详细讲一下比较重要，而且常用的一些属性。

1，flex-direction 方向属性/值说明:

• row：横向从左到右排列（左对齐），默认的排列方式。
• column：纵向从上到下排列（上对齐）。
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。（了解即可）
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。（了解即可）

2，justify-content 水平对齐方向的属性/值的说明：

• flex-start 所有子元素左对齐
• flex-end 所有子元素右对齐
• center 所有子元素居中
• space-between 子元素两端对齐，元素之间的间隔都相等
• space-around 每个子元素两侧的间隔相等。项目之间的间隔是两侧的间隔的两倍

3，align-items 垂直方向属性/值的说明：

• flex-start 所有子元素上对齐
• flex-end 所有子元素下对齐
• center 所有子元素居中对齐
• baseline 所有子元素在父元素的基线上
• stretch 拉伸元素以适应父元素高度

四，flex弹性子盒子

1，order属性
定义项目的排列顺序。数值越小，排列越靠前 order:0（默认值）

2，flex属性说明：(重点)
在实际使用flex布局中，经常使用的就是flex属性，来同时设置flex-grow、flex-shrink、flex-basis这3个属性。flex属性是三者的简写形式，类似一个“语法糖”。日常开发制作中大多数使用这种简写方式。flex: grow shrink basis;
案例：flex:1; 等价于 flex:1 1 auto; flex:2; 等价于 flex:2 1 auto;”。
解释：也就是说使用flex的写法，在只填写一个值时，表示只设置了flex-grow这个属性的取值，其他两个也属于默认值就可以省略简写了。事实上，在实际开发中我们一般也是只需要设置flex-grow属性，很少用得上另外两个属性。

3，flex-grow
使用flex-grow属性来定义弹性盒子内部子元素的放大比例。
使用条件就是：所有子元素宽度之和小于父元素的宽度时，子元素如何分配父元素的剩余空间。

• 当取值为0时，表示不获取父元素的剩余空间，不会参与划分。
• 当取值大于0时，表示获取父元素的剩余空间（即子元素放大）。取值越大，获取得越多。

4，flex-shrink
flex-shrink属性用于定义弹性盒子内部子元素的缩小比例。
使用条件就是：所有子元素宽度之和大于父元素的宽度时，子元素如何缩小自己的宽度。 flex-shrink属性取值是一个数值，默认值为1。

• 当取值为0时，表示子元素不缩小，不会参与划分。
• 当取值大于1时，表示子元素按一定的比例缩小。取值越大，缩小得越厉害。

两者的总结对比：
只有当所有子元素宽度之和小于弹性盒子的宽度时，flex-grow才会生效，而此时flex-shrink无效；只有当所有子元素宽度之和大于弹性盒子的宽度时，flex-shrink属性才会生效，而此时flex-grow无效。也就是说，flex-grow和flex-shrink是互斥的，不可能同时生效。

5，flex-basis
解释：flex-basis: auto; 就是width的替代品，这两个都用来定义子元素的宽度。只不过在弹性盒子中，flex-basis的语义会比width好一点而已。