Flex布局的基本语法

应用在父元素上-flex box

1. 模型

display: flex（盒子模型）

定义父元素为flex元素

2. 方向

flex-direction (子元素的排列方向)

row (默认值): 从主轴起点到到主轴终点

row-reverse: 从主轴终点到主轴起点

column: 从侧轴起点到侧轴终点

column-reverse: 从侧轴终点到侧轴起点

3. 换行

flex-wrap（子元素在主轴上铺满时，是否换行）

Nowrap（默认值）: 不换行
Flex容器能容纳所有的子元素（Flex项目）排列，即使浏览器出现了水平滚动条（当Flex容器中添加了很多个Flex项目，至使Flex容器的宽度大于视窗宽度）。

Wrap:换行且从顶部到到底部排列

Wrap-reverse:换行且从底部到到顶部排列
当你希望Flex容器内的Flex项目达到一定数量时，能换行排列。
当Flex容器中没有足够的空间放置Flex项目（Flex项目默认宽度），

4. 组合方向换行

flex-flow（默认值 Flex-flow: row nowrap;）

flex-flow : flex-direction flex-wrap

5. 水平对齐

justify-content（沿着主轴对齐，分配剩下多余的空闲空间）

flex-start (默认值): flex项目从主轴起点开始无空闲空间地排列在一起

flex-end: flex项目从主轴终点开始无空闲空间地排列在一起

center: flex项目排列在主轴中间，两边空闲空间均匀分批

space-between: 在主轴上的空闲空间均匀地分配到每两个flex项目中间

space-around: 在主轴上每个flex项目两边都分配一样的空间

6. 垂直对齐

align-items（侧轴对齐方式）

stretch (默认值):把所有的元素伸开，所有flex项目的高度以最高的flex项目为准

flex-start: 在主轴上排列的flex项目顶部，对齐侧轴的起点

flex-end: 在主轴上排列的flex项目底部，对齐侧轴的终点

center: 在主轴上排列的flex项目中部，对齐侧轴的中间

baseline: flex项目沿着自己的基线对齐

7. 多行垂直对齐

align-content（当出现多行flex项目时，侧轴方向对齐方式）

stretch (默认值): flex盒子和flex项目没设置高度时，盒子高度以高度最高的flex项目为准

flex-start: 多行flex项目顶部对准侧轴起点

flex-end: 多行flex项目底部对准侧轴终点

center: 多行flex项目中部对准侧轴中间，空闲空间均匀分配打破多行flex项目两边

space-between:侧轴方向上，空闲空间均匀分配到每两行flex项目的中间

space-around: 侧轴方向上，空闲空间均匀分配到每行flex项目的两边

应用在子元素-flex项目

1.排序

Order（排序）

默认情况下，所有Flex项目的order值都是0

可以正负值，设置子元素排列的先后顺序号

如果两个以下Flex项目有相同的order值时，Flex项目重新排序是基于HTML源文件的位置进行排序。

2.伸展

flex-grow（伸展）

默认情况下，flex-grow属性值设置为0。表示Flex项目不会增长，填充Flex容器可用空间。表示flex-grow属性没有使用。

如果只有一个子元素设置了flex-grow的值，则这个子元素分配剩下的所有的空闲空间。如果你试着调整你浏览器的大小，Flex项目也会放大，以适应新的屏幕宽度。

如果多个子元素设置了flex-grow的值，则按照值的比例来分配剩下的空闲空间。

3. 收缩

flex-shrink（收缩）

默认情况下，flex-shrink的值是1，也就是说flex-shrink开关也是打开的。

如果你试着调整你浏览器的大小，Flex项目也会放大，以适应新的屏幕宽度。

按照子元素设置的flex-shrink值，来按比例收缩flex项目。

4. 初始宽度

flex-basis（初始宽度）

指定flex项目的初始宽度大小，可以是比例也可以是长度单位。
默认的值是auto。

flex-basis可以取任何用于width属性的任何值。Flex项目宽度的计算是基于内容的多少来自动计算（很明显，加上了padding值）。

这意味着，如果你增加Flex项目中的内容，它可以自动调整大小。

然而，如果你想将Flex项目设置一个固定的宽度，现在Flex项目的宽度受到了限制。

值为0,内容不考虑周围的额外空间。

注意：如果flex-basis属性的值是0时，也需要使用单位。
即flex-basis: 0px不能写成flex-basis:0

5. 垂直位置和垂直伸展

align-self（控制单个flex项目侧轴的位置和高度）

auto
是将目标Flex项目的值设置为父元素的 align-items值，或者如果该元素没有父元素的话，就设置为 stretch。继承父元素的 align-item 值。

flex-end
将目标项目（Flex项目）对齐到Cross-Axis的末端。

center
将目标项目（Flex项目）对齐到Cross-Axis的中间。

stretch
会将目标项目拉伸，以沿着Cross-Axis填满Flex容器的可用空间（Flex项目高度和Flex容器高度一样）。

baseline
将目标项目沿着基线对齐。它与flex-start的效果看起来是一样的，不过我相信你理解了基线是什么。因为前面已经解释过。

6. 组合膨胀收缩初始宽度

flex：flex-grow flex-shrink flex-basis

flex:0 1 === flex：膨胀收缩（无值时，默认为0）
flex默认属性值以及所有的Flex项目都是默认行为
不伸展，会收缩

flex:0 0 auto === flex:none
试着缩放一下浏览器，你会注意到弹性项目不会收缩其宽度。它们从父元素中突出来了，要看到所有内容，必须横向滚动浏览器。

flex: 1 1 auto === flex: auto
还是按我前面立的规矩。即，自动计算初始化宽度，但是如果有必要，会伸展或者收缩以适应整个可用宽度。
此时，项目会填满可用空间，在缩放浏览器时也会随之收缩。

flex: 2 1 0 === flex: 2
2 表示任何正数

绝对项目相对项

1. 绝对项目

Flex：膨胀宽度收缩宽度
如果你只设置了flex-grow和flex-shrink值，flex-basis可能是默认值0。这就是所谓的绝对flex项目。

2. 相对项目

Flex：膨胀宽度收缩宽度初始宽度
只有当你设置了flex-basis，你会得到一个相对flex项目。

3. 绝对和相对Flex项目之间到底有啥区别

二者之间主要的区别在于间距及如何计算间距。

绝对Flex项目中，只根据 flex 属性来计算，而不是内容。
flex-basisi:0

一个相对Flex项目内的间距是根据它的内容大小来计算的。
flex-basis:auto

Margin:auto的作用

1. 使用margin:auto

第一个Flex项目使用margin:auto;前后
当在Flex项目上使用 margin: auto 时，左、右l两边会占据所有剩余空间。
让一个Flex项目的两边都用自动外边距对齐
margin-left: auto;
margin-right: auto;

2.Justufy-content属性什么时候不起作用

当在一个Flex项目上使用自动外边距（margin: auto）时，justify-content 属性就不起作用了。
当用 flex-direction: column 时
项目的宽度填满了空间

1. 高度

Flex（膨胀宽度、收缩宽度、初始宽度）属性变成了（高度）
本质上，每个作用于横向轴（即Main-Axis）上的 flex 属性，现在都会作用于纵向上的新Main-Axis。它只是在方向上的一个切换。
影响Main-Axis的每一个属性现在会影响新Main-Axis。像 flex-basis 这种会影响Main-Axis上Flex项目宽度的属性，现在会影响项目的高度，而不是宽度。

2. 位置

Main-Axis是从上到下，Cross-Axis是从左到右。
Justify-content（水平位置）变成（垂直位置）
justify-content: center；flex项目垂直居中了
Align-items（垂直位置）变成（水平位置）
align-items: center;Flex项目已经水平居中了

浏览器bug

在有些浏览器中，会有一个 bug，允许Flex项目收缩后比其内容尺寸小。这是个很古怪的行为。