flex布局

这次将总结一下flex布局和有关属性。

一、父元素有关属性

和父元素相关的属性有如下六个：

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

1.flex-direction该属性规定了主轴方向，即子项的排列方向

div{    display:flex;    flex-direction:row/row-reverse/column/column-reverse;}

——— ——— ———

row（默认值）主轴为水平方向，起点在左端（如上图中1所示） row-reverse主轴为水平方向，起点在右端（如上图中2所示） column主轴为垂直方向，起点在上端（如上图中3所示） column-reverse主轴为垂直方向，起点在下端（如上图中4所示）

---

2.flex-wrap该属性规定子项的换行方式

默认情况下，项目都排列在一条线上。flex-wrap属性定义了在一条线上排列不下是的换行方式。

div{    flex-wrap:nowrap/wrap/wrap-reverse;}

——— ———

nowrap（默认值）不换行（如上图中1所示） wrap换行，第一行在上（如上图中2所示） column换行，第一行在下（如上图中3所示）

---

3.flex-flow

flex-flow属性是flex-direction和flex-wrap的简写。

div{    flex-flow:flex-direction flex-wrap;}

---

4.justify-content规定了子项在主轴上的对其方式

div{    justify-content:center/flex-start/flex-end/space-around/space-between/inherit/initial}

center居中对齐（如上图中1所示） flex-start（默认值）左对齐（如上图中2所示） flex-end右对齐（如上图中3所示） space-around每个项目两侧的间隔相等，两个项目之间的间隔比项目与边框的间隔大一倍（如上图中4所示） space-between两边和边框对齐，项目之间间隔相等（如上图中5所示）inherit继承父元素样式 initial使用默认值

---

5.align-items规定了子项在交叉轴上的对其方式

div{    justify-content:baseline/center/flex-start/flex-end/inherit/initial/stretch}

baseline项目上第一行文字的基线对齐（如上图中1所示）center居中对齐（如上图中2所示） flex-start交叉轴的起点对齐（如上图中3所示）flex-end交叉轴的终点对齐（如上图中4所示）stretch（默认值）如果项目未设置高度或者高度为auto，将占满整个容器的高度（如上图中5所示）inherit继承父元素样式 initial使用默认值

---

6.align-content规定了多根轴线的对其方式

div{    align-content:flex-start/flex-end/center/space-between;}

---

一、子项元素有关属性