Flex布局

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、Flex是什么？
• 二、属性
  • 1.justify-content
  • 2.align-items
• 总结

---

前言

上次写了如何使用Flex控制子元素方向，这次写如何控制子元素排列

---

一、Flex是什么？

Flex是CSS的一个属性，可以使元素脱离标准流控制，优化网页布局

二、属性

1.justify-content: __;子元素沿X轴排列

justify-content: flex-star; 子元素从左向右排

justify-content: flex-end; 子元素水平靠右排列

justify-content: center; 子元素水平居中排列

justify-content: space-between; 子元素水平居中散开排列

justify-content: space-around; 第一个子元素靠左，第二个子元素居中，第三个子元素靠右排列

2.align-items: __;子元素沿y轴排列

align-items: flex-start; 子元素垂直于父级盒子顶部排列

align-items: flex-end; 子元素垂直于父级盒子底部排列

align-items: center; 子元素垂直居中排列

align-items: baseline; 子元素以第一行文字为基准线进行排列

align-items: strech; 当某个子元素没有设置高度时，会自动撑满子元素所在的那一列

---

总结

以上简单介绍了flex中的justify-content以及align-items的使用，而Flex还要很多其他属性例如行与行之间的排列、单独控制子元素的位置等，明天写