flex布局

Flex布局特点

1. 块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。
2. flex布局可以实现空间自动分配、自动对齐（flexible：弹性、灵活）
3. flex适用于简单线性布局，更复杂的布局要交给grid布局。

基本概念

flex container的属性

• flex-direction 方向
• flex-wrap 换行
• flex-flow 上面两个的简写
• justify-content 主轴方向对齐方式
• align-items 侧轴对齐方式
• align-content 多行/列内容对齐方式

1. flex-direction 方向

   
   

2. flex-wrap 换行

   
   

3. flex-flow 上面两个属性的结合

   
   

4. justify-content 主轴方向的对齐方式(主轴要由flex-direction决定)

   
   
   
   
   
   
   
   
   
   

5. align-items 侧轴对齐方式

   
   
   
   
   
   
   
   

6. align-content 多行/列内容对齐方式（用得较少）

   
   
   
   
   
   
   
   
   
   

flex item 的属性

• flex-grow 增长比例（空间过多时）
• flex-shrink 收缩比例（空间不够时）
• flex-basis 默认大小（一般不用）
• flex （上面三个缩写）
• order 顺序（代替双飞翼）
• align-self 自身的对齐方式

1. flex-grow增长比例（空间过多时）

   
   
   
   
   
   

2. flex-shrink 收缩比例（空间不够时）

   
   
   
   

3. flex-basis （默认大小一般不用）

   
   
4. flex （上面三个的缩写）

5. order 顺序（代替双飞翼）

   
   

6. align-self 自身的对齐方式

   
   
   
   

使用flex布局

1. 手机页面布局（topbar + main + tabs）
   header加flex-shrink: 0;

   
   

2. 产品列表

   
   

3. PC布局

   
   
4. 完美居中
   
   
   a complete guid to flexbox
   flex布局教程语法篇