flex布局

flex

容器属性

flex-direction 设置项目的排列方向

• row（默认值）：主轴为水平方向，起点在左端。 横着排列

• row-reverse：主轴为水平方向，起点在右端。

• column：主轴为垂直方向，起点在上沿。 竖着排列

• column-reverse：主轴为垂直方向，起点在下沿。
  

flex-wrap 排不下换行属性

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

---

flex-flow 是flex-direction属性和flex-wrap属性的简写形式

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

---

justify-content 项目在主轴上的对齐方式 水平居中类似

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

---

align-items 定义项目在交叉轴上如何对齐 设置垂直居中

---

align-content这个属性设置排列方向之后，并且设置换行，这个属性才会起作用 就是设置了direction和flex-wrap才生效

项目属性

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

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

---

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 设置越大盒子缩放越小 默认是 1

​ 父盒子宽度无法满足里面的盒子时 又想第一个盒子设置成原来的宽度时可以设置

​ flex-shrink:0; 0就是不缩放

flex-basis

/* 第一步：平均分配剩余空间 */

flex-grow: 1;

/* 第二步，想占多少地方，可以设置宽度 */

/* width: 150px; /
-flex-basis: 150px;
/ flex-basis: 40%; /
/ flex-basis: 20rem; */

/* 第三步：默认值auto */
			flex-basis: auto;

flexflex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

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

align-self 可以覆盖原来的 父盒子的 align-items垂直居中的属性

参考资料 [https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html#comment-377786]