flex弹性布局之弹性盒子模型

一，flex弹性盒子布局

1. flex弹性盒子介绍

弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

2. flex弹性盒子组成

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器定义，通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

二，flex弹性容器

1.弹性容器的属性总结表：

属性说明	属性	值
启用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-direction（方向值），flex-wrap（换行值）)
子元素换行	flex-wrap	nowrap（默认值）/ wrap / wrap-reverse
多(行)根轴线的对齐方式	align-content	stretch（默认值）/ flex-start / center / flex-end / space-between / space-around

详细的解释和在线预览: 菜鸟教程

2.flex

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

3.flex-direction的值说明:

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

4.justify-content属性值的说明：

水平对齐方向的属性每个值的说明：

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

水平对齐效果图：

5.align-items 属性每个值的说明：

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

垂直对齐方式效果图：

二，flex弹性子元素

flex子元素具有如下属性：

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

1.order属性

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

order ：0

解释：order属性取值是一个正整数.

2.flex属性说明：(重点)

在实际使用flex布局中，经常使用的就是flex属性，来同时设置flex-grow、flex-shrink、flex-basis这3个属性。flex属性是三者的简写形式，类似一个“语法糖”。日常开发制作中大多数使用这种简写方式。
语法：

flex: grow shrink basis;
flex: 比例值;

案例：
flex:1;  等价于 flex:1 1 auto;
flex:2;  等价于 flex:2 1 auto;”。

解释：也就是说使用flex的写法，在只填写一个值时，表示只设置了flex-grow这个属性的取值，其他两个也属于默认值就可以省略简写了。事实上，在实际开发中我们一般也是只需要设置flex-grow属性，很少用得上另外两个属性。

3.flex-grow

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

flex-grow: 数值;

解释：flex-grow属性取值是一个数值，默认值为0。当取值为0时，表示不获取父元素的剩余空间，不会参与划分。当取值大于0时，表示获取父元素的剩余空间（即子元素放大）。取值越大，获取得越多。

4.flex-shrink

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就是width的替代品，这两个都用来定义子元素的宽度。只不过在弹性盒子中，flex-basis的语义会比width好一点而已。
语法：

flex-basis: auto;

解释：属性取值有两个：一个是“auto”，即该子元素的宽度是根据内容多少来定的；
另外自行定义“长度值”，单位可以为px、em和百分比等。

后期根据需要，在进行增加…