【笔记】flex学习笔记

主要参考阮一峰老师的教程。
教程链接：flex布局教程：语法篇

定义

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

.box{
  display: flex;
}

布局

容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis。主轴的开始位置与边框的交叉点叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器属性

设置在容器上的属性有六个：

属性名	用法
flex-direction	排列方式
flex-wrap	换行
flex-flow	（综合前两个属性）
justify-content	主轴对齐方式
align-items	交叉轴对齐方式
align-content	多轴线对齐方式

flex-direction排列方式

定义项目排列方向。
row（从左到右） | row-reverse（从右到左） | column（从上到下） | column-reverse（从下到上）;

flex-wrap换行

定义换行。 nowrap（不换行） | wrap（换行） | wrap-reverse（换行，第一行在下）;

flex-flow简写

flex-direction和flex-wrap的综合简写，默认值为 row nowrap

justify-content主轴对齐

定义在主轴上的对齐方式。
flex-start（起点对齐） | flex-end（终点对齐） | center（居中） | space-between（项目之间间距相同） | space-around（项目两边间距相同）;
space-between和space-around的区别：

align-items交叉轴对齐

定义在交叉轴上的排列方式。
flex-start | flex-end | center | baseline（基于第一行文本） | stretch（默认，占满整个容器的高度）

align-content多轴线对齐

当存在多个轴线时的对齐方式。（单个轴线时不起效）
flex-start | flex-end | center | space-between | space-around | stretch;
定义的是轴线的对齐方式，所以表现为项目的垂直方向的距离变化。

项目属性

属性名	用法
order	排列顺序
flex-grow	项目放大比例
flex-shrink	项目缩小比例
flex-basis	项目主轴占据大小
flex	前三个的缩写方式
align-self	特殊对齐方式

order排列顺序

值为数字，升序排列，越小越靠前。

flex-grow放大比例

值为数字，是项目在容器中的占比，例如flex-grow分别为1和2的两个项目，后者大小会比前者大一倍。若值为0，则表示即使有空间也不放大。

flex-shrink缩小比例

值为数字，默认值为1，即可以缩小；若设置为0，则当容器空间不足时，该项目不会缩小。无法设置负值。
注意：虽然两者的值都是数字，flex-grow的值代表的是比例，但flex-shrink中的数值更类似于boolean，是“是否可以缩放”，而不是缩放比例。

flex-basis占据主轴大小

默认值为auto（即项目的本来大小），但也可以像width和height一样设置为具体的值。

flex简写

是grow、shrink、basis的简写形式，，后两个属性可以不写，默认值为0 1 auto。
快捷值：
①auto：1 1 auto
②none: 0 0 auto

align-self特殊对齐方式

定义项目不同于其他项目的对齐方式，可以覆盖align-items。例如：align-items的值为flex-start，但项目的align-self设置为flex-end，则该项目会靠近末尾。
默认值为auto，即继承父元素的align-items，如果没有父元素则为stretch。