CSS弹性盒子

CSS弹性盒子(Flexible Box 或 Flexbox): MDN教程

概念

看MDN即可。

何时使用它

当页面需要使用不同的屏幕尺寸和不同的显示设备时。

特性

1. 不需依赖float就能在行或列进行上布局，并且能以弹性尺寸来适应空间
2. flex容器的边缘不会与其他内容折叠
3. 元素的显示顺序可以与它们在源代码中的顺序无关，所以弹性项目的定位更加便捷了，简单的代码即可完成复杂的布局

布局相关核心概念

各个词汇的具体含义，请参照MDN的教程，上面写的很详细: 地址

1. 弹性容器(Flex contaner)：包含着弹性项目的弹性容器。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。
2. 弹性项目(Flex item)：弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。
3. 轴(Axis) : 分为主轴和侧轴; 每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。相关属性：flex-direction、justify-content、align-items、align-self
4. 方向(Direction). 相关属性：order、flex-flow
5. 行(Line): 根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。
6. 尺寸(Dimension)： 根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size) ，对应侧轴的称为 侧轴尺寸(cross size)。相关属性：flex

flex相关的属性简述

1. align-content: 定义于弹性容器上，当弹性项目换行/列时：先收拢行/列，再设置他们在侧轴上的排列方式。flex-wrap可以让弹性项目换行/列
2. justify-content: 定义弹性项目在主轴上的排列规则
3. align-items: 定于单个弹性项目在侧轴上的排列方式。与align-content不同的是，它不需要弹性项目换行/列；align-content改变的整个行的排列方式，align-items改变的是元素的排列方式(相当于给每个弹性项目设置相同的align-self值). 下面的图1和图2可以看出区别。
4. flex-direction: 定义主轴的方向
5. flex-wrap: 可以让flex弹性项目换行/列的属性
6. flex-flow: flex-direction 和 flex-wrap 的简写。
7. order: 可以设置可伸缩弹性项目在布局时的顺序。但是并不会影响元素的逻辑和tab顺序; 虽然视觉顺序变了，但是:last-child选择的仍然是HTML代码中的最后一个弹性项目。
8. align-self: 定义在弹性项目上，更改此弹性项目在侧轴上的排列方式
9. flex-grow: 定义在弹性项目上，设置它的拉伸因子。通俗点讲，当弹性项目平均分配width时，它可以改变某个元素分得的空间更多或更少。值越大分得越多
10. flex-shrink: 定义在弹性项目上，指定了元素的收缩规则(当弹性项目的宽度之和大于弹性容器的宽度时，弹性项目就会收缩)，值越大收缩的越厉害。
11. flex-basis: 定义与弹性项目上，指定了元素在主轴上默认的大小
12. flex: flex-grow flex-shrink flex-basis的总写。

图1

图2

不影响弹性盒子的属性

• 多栏布局模块的 column-* 属性对弹性项目无效。
• float 与 clear 对弹性项目无效。使用 float 将使元素的 display 属性计为block。
• vertical-align 对弹性项目的对齐无效。

友情提示

这篇文章类似于一个目录，让我们快速知道flex到底包含了什么，至于怎么样去使用此项技术进行页面布局，还需要多练多看咯！

再来看看我做的一张思维套图，仅供参考。