背景
W3C在2009年提出了一种新的布局方案：Flex 布局。Flex布局可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项属性。
浏览器支持情况
但对于新手来讲，盒模型或布局基础掌握不牢，会认为flex布局属性及其对应的取值太多，很难记住。为此小郭特意整理了一份前端最常用的flex布局方式，直接使用，不需要测试所有属性的作用。
废话不多说，直接上干货。
常用布局
默认：Flex 布局默认就是首行左对齐
一、行内或列内布局
- 行内居中对齐
| .box { | |
| display: flex; | |
| justify-content: center; // 实现左、右对齐 | |
| align-items: center; // 实现垂直方向对齐 | |
| } |
- 行内两端对齐
| .box { | |
| display: flex; | |
| justify-content: space-between; | |
| // align-items: center; 实现垂直方向对齐 | |
| } |
- 行内与起始位置或结尾位置对齐
| .box { | |
| display: flex; | |
| justify-content: flex-start; // 与起始位置对齐 | |
| // justify-content: flex-end; // 与结束位置对齐 | |
| // align-items: center; 实现垂直方向对齐 | |
| } |
- 列内两端对齐
| .box { | |
| display: flex; | |
| flex-direction: column; // 改变主轴线 | |
| justify-content: space-between; | |
| // align-items: center; 实现垂直方向对齐 | |
| } |
- 行内均匀分布
| .box { | |
| display: flex; | |
| justify-content: space-around; // 均匀分布 // align-items: center; 实现垂直方向对齐 | |
| } |
二、超出折行
具体一行内含有多少元素，需要根据宽度设置来决定，超出部分换行
| .box { | |
| display: flex; | |
| flex-wrap:wrap; | |
| } |
附注：补充部分以上未提及的属性及子项属性
align-content：该属性只作用于多行的情况下，用于多行的对齐方式
align-self：用来单独指定某Flex子项的对齐方式
以上布局方式足以满足常见的布局需求，想了解关于flex布局更加详细内容可以在下方留言或私信我