flex布局

image.png

![image.png](https://upload-images.jianshu.io/upload_images/6217104-59ab2905a979cc54.png?imageMogr2/auto-
主轴设置：

---

orient/strip%7CimageView2/2/w/1240)

image.png

默认的justify-content:flex-start 左对齐

---

image.png

image.png

变成了右对齐

---

image.png

image.png

中间对齐

---

image.png

image.png

将剩下的空间平均分配给其他元素

---

image.png

image.png

---

另一个轴方向的设置：

image.png

image.png

---

image.png

image.png

---

image.png

image.png

---

image.png

image.png

---

image.png

image.png

纵轴方向的 space-around

---

image.png

image.png

---

image.png

image.png

一行中元素的 对齐方式

---

flex:1 其中是对三个参数的设置
第一个参数是 能否放大，可以放大的倍数
第二个参数是 能否缩小 可以缩小的倍数
第三个参数是

---

flex的总结：

image.png

方向可以是 row-reverse 横向从右向左
方向可以是 column-reverse 横向从下向上