移动端基础（2）—— flex弹性布局

一、flex弹性布局

flexible-box-layout 弹性盒式模型，它能更加高效的控制元素的对齐、排列，更重要的是能够自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的。

父元素（flex container）
子元素（flex item）
主轴（main axis）可由display-direction属性设置主轴的方向
交叉轴（cross axis）
不一定弹性盒子中水平方向的轴就是主轴，垂直方向上的轴就是交叉轴

主轴的起点（main start）
主轴的终点（main end）起点和终点决定了在自然情况下元素的排列顺序
交叉轴起点（cross start）
交叉轴终点（cross end）
主轴尺寸（main size）由flex container的尺寸决定
交叉轴尺寸（cross size）由flex container的尺寸决定

（一）伸缩容器的属性

以下的7个属性是设置在容器上的

1. display
2. flex-direction
3. flex-wrap
4. flex-flow
5. justify-content
6. align-items
7. align-content

1.display

将目标容器布局方式设置为弹性布局

目标容器设置为弹性布局（块级元素）

display:flex

目标容器设置为弹性*布局（行内元素）

display:inline-flex //不再占据一整行

兼容浏览器（推荐写法）

display:-webkit-flex;
display:flex;

PS:设为 flex容器以后，flex子元素的float、clear和vertical-align属性将失效。

---

2.flex-direction

定义子元素在主轴的排列方式

语法

flex-direction: row（默认） | row-reverse | column | column-reverse

• row（默认值）：主轴为水平方向，起点在左端。
  
• row-reverse：主轴为水平方向，起点在右端。
  
• column：主轴为垂直方向，起点在上沿。
  
• column-reverse：主轴为垂直方向，起点在下沿。
  

---

3.flex-wrap

设置flew-item的换行。

语法

flex-wrap:nowrap（默认） | wrap | wrap-reverse

• nowrap （默认）不换行（若子元素和大于父元素，那么设置的子元素的宽度失效，子元素变小硬挤在一行中）
  

• wrap 宽度不够自动换行，第一行在上方。
  

• wrap-reverse 宽度不够自动换行，第一行在下方。
  

---

4.flew-flow （flex-direction和flex-wrap的简写）<