背景

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布局更加详细内容可以在下方留言或私信我