Flex布局（2）

上次内容我们已近简单介绍过Flex布局及他的一些基本属性，今天在昨天的基础上，让我们再深入了解一下吧！

1、水平垂直居中

justify-content: center 让子盒子item在水平方向居中

align-items: center 让子盒子item在垂直交叉轴方向居中

想要实现水平垂直居中，首先要知道到底是以谁为基准，也就是说要在哪个里面实现垂直居中

这是让粉色盒子在红色边框的盒子中水平居中，所以红色边框盒子作为基准，设置属性值。

当我想要红色边框的盒子也在页面的显示水平垂直居中，那么现在浏览器就作为了基准，那么我们就要在body中设置属性值。

☆要记得给body设置高度

---

2、align-content 定义了多根轴线的对齐方式

如果项目只有一根轴线，该属性不起作用。

flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍
stretch	子元素没有设置高度或者高度为auto，轴线占满整个交叉轴

① flex-start

---

②flex-end

---

 ③center

---

④ space-between

---

 ⑤space-around

---

 ⑥ stretch

---

☆以上我们学习的属性都是在父元素上设置，下面要学习的属性都设置在子元素item上。

一、项目元素 item 的属性

1、order 排序

order 定义项目排列顺序，默认值为0，数值越小，排列越靠前

当我想让排在第三的“盒子3”往前排列，那么我就在他的元素里加上order: -1;

---

2、flex-grow 长大

• 在容器主轴上存在剩余空间时, flex-grow才有意义

•  该属性的值,称为放大因子

  值	描述
  0	默认为0，即如果存在剩余空间，也不放大
  1	把剩余空间充满

① flex-grow：0

---

 ②  flex-grow：1

---

3、flex-shrinik: 缩小

值	说明
1	默认为1，表示被压缩
0	表示不被压缩，保持设置的尺寸

① flex-shrinik:0

 .item:nth-of-type(2){flex-shrinik:0}  表示第二个项目不被压缩，保持设置的尺寸

只有第二个项目保持了原来的宽度400px，第一个和第三个都默认为1，被缩小

---

②如果每个项目都设置flex-shrink: 0，将会超出父元素宽度

---

4、align-self

• 该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式

☆在多根轴线下设置无效

值	说明
flex-start	与交叉轴起始线对齐
flex-end	与交叉轴终止线对齐
center	与交叉轴中间线对齐: 居中对齐
stretch	在交叉轴方向上拉伸

①  flex-start

.item:nth-of-type(3）{align-self：flex-start}

---

②flex- end

.item:nth-of-type(3）{align-self：flex-end}

---

 ③center

.item:nth-of-type(3）{align-self：center}

---

④stretch

.item:nth-of-type(3）{align-self：stretch​​​​​​​​​​​​​​}

---

5、 flex-basis

flex-basis优先级比width高，同时设置，会展示flex-basis的高度

如果一行排列不下，还是会被压缩宽度，除非设置flex-shrink: 0

---

6、flex是复合属性，由：flex-grow flex-shrink flex-basis 组成

默认值为flex（0 1 auto）后两个属性可选，

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。