以下为个人认为有必要记录的笔记 不喜勿喷
Flex属性和弹性盒模型概述
- 以下几种属性设置在弹性盒布局中是不起作用的：
- 浮动元素（float）
- 清除浮动（clear）
- css3多列布局（columns-*）
- 垂直居中（vertical-align）
- 首行/首字符选择伪类（::first-line和::first-letter）
- 有的flex属性只能作用于flex容器，而有的flex属性只能作用于flex条目。
- 传统的布局方案中:
- 块级布局（block）默认是将各个块级元素按照垂直方向自上向下依次堆放；
- 内联布局（inline）默认是将各个内联元素按照水平方向按照从左到右的顺序依次堆放。
- 弹性盒布局：
- 弹性盒布局不存在这种默认的布局方向限制，它提供了独立的布局方向属性，开发人员可以根据布局需要自行设置。
弹性盒布局基本概念
flex container
即所谓的容器（或者称之为弹性盒、flex容器），特指设置了弹性盒布局的dom元素。
flex item
即所谓的条目（或者称之为flex条目），即容器的子元素。
main axis和cross axis
即所谓的主轴和交叉轴（有的翻译文章也称之为侧轴）。这两个属性定义flex布局方向。分别对应的是水平还是垂直方向不固定，开发人员完全自定义主轴和交叉轴的方向。
- 在使用flex布局时，首先明确主轴的方向，然后交叉轴的方向也会随之确定下来。因为交叉轴的方向始终是与主轴的方向是垂直的。
- flex容器中flex条目可以根据布局需要排列成单行或者多行。
- 主轴的作用是确定每一行上flex条目的排列方向。
- （当flex条目成多行排列时）交叉轴的作用是确定行与行之间的排列方向。
main start和main end
即所谓的主轴起点和主轴终点。
- 明确主轴的方向后，还需要确定各自的排列方向。
- 假如已经明确主轴的方向是水平的，那么其排列方向仍然会有两种可选，一种是从左到右的排列方向（flex条目从左到右依次堆放），另一种是从右到左排列方向（flex条目从右到左依次堆放）。
- 主轴起点在左，主轴终点在右即为从左到右的排列方向。
- 主轴起点在右，主轴终点在左即为从右到左的排列方向。
cross start和cross end
即所谓的交叉轴起点和交叉轴终点。
- 交叉轴起点和交叉轴终点明确了行与行之间的排列顺序。
- 假如已经明确交叉轴的方向是垂直的，那么其排列方向仍然将会有两种可选，一种是从上到下的排列方向（第二行在第一行的下方），另一种是从下到上的排列方向（第二行在第一行的上方）。
所以，在flex容器进行布局时，在每一行中会把其中的flex条目从主轴起始位置开始，依次排列到主轴结束位置。当flex容器中存在多行时，会把每一行从交叉轴起始位置开始，依次排列到交叉轴结束位置。
main size和cross size
即所谓的主轴尺寸和交叉轴尺寸。
- 对应dom元素在主轴和交叉轴上的大小。
- 如果主轴方向是水平的（那么交叉轴方向肯定是垂直的），此时主轴尺寸即是dom元素（flex容器）的宽度属性，交叉轴尺寸即是dom元素（flex容器）的高度属性。
- 如果主轴方向是垂直的，那么主轴尺寸和交叉轴尺寸对应的dom元素宽高属性与之前相反。
针对flex容器的属性
flex-direction
设置主轴方向。
flex-wrap
用于设置当所有的flex条目的尺寸之和超过flex容器的主轴尺寸时应该采取的行为。
flex-flow
其实就是flex-direction和flex-wrap的结合。
针对flex条目的属性
order
自定义flex容器中条目的顺序。
- 用整数值来定义排列顺序，数值小的排在前面。默认值为0，可为负值。
flex-basis
用于设置flex条目的初始尺寸（未进行任何调整之前）。
- 当设置为auto（默认值 ）时，则实际使用的值是主轴尺寸属性的值。
- 若主轴尺寸也是auto，那么使用的值由条目内容的尺寸来确定。
flex-grow
当主轴尺寸足够大时，flex条目在容器内一行就全部排列完了，此时容器的空间还有剩余，那么可用flex-grow扩展flex条目。
- 根据其数值分配剩余空间。
- 以行为单位来操作。
flex-shrink
设置当主轴尺寸不够大时缩小flex条目。
- 和flex-grow原理类似，自行体会。
- 以行为单位来操作。
flex条目的对齐
基于margin: auto对齐
使用空白边，flex容器中额外的空白空间将会由被声明为auto的空白边占据。
基于主轴对齐
通过justify-content属性来进行设置，调整flex条目在主轴方向上的对齐策略，还可以控制当条目超出行的范围时的对齐方式。
- 发生在修改条目的弹性尺寸和处理自动空白边之后。
基于交叉轴对齐
- align-items - 设置flex容器。
- align-self - 设置flex条目。
- 属性值和align-item差不多，除此之外，align-self还可以设置为auto：其值是父节点的属性align-items的值,如果该节点没有父节点，则为stretch。
- 对flex条目设置align-self来复写flex容器指定的对齐方式。
flex行的对齐
多行flex布局时，主轴方向上的每一行就是Flex Lines。
- align-content - 设置行与行之间的对齐策略。
flex复合属性
flex: none | auto | [flex-grow] | [flex-shrink] | [flex-basis]
- 其中none的含义为：0 0 auto, 即flex-grow: 0，flex-shrink: 0， flex-basis: auto。
- 其中auto的含义为：1 1 auto, 即flex-grow: 1，flex-shrink: 1， flex-basis: auto。
- 当flex-basis被省略时，其值为0%。
来源：https://blog.csdn.net/weixin_43451006/article/details/99576446