Flexbox布局初学者

1、justify-content（水平对齐元素）

flex-start: 元素和容器的左端对齐
flex-end: 元素和容器的右端对齐
center: 元素在容器里居中
space-between:元素之间保持相等的距离
space-around:元素周围保持相等的距离

{
  display: flex;
  justify-content: flex-end;
}

2、align-items（纵向对齐元素）

flex-start: 元素与容器的顶部对齐
flex-end: 元素与容器的底部对齐
center: 元素纵向居中
baseline: 元素在容器的基线位置显示
stretch: 元素被拉伸以填满整个容器

---

3.flex-direction（元素在容器里摆放的方向）

row: 元素摆放的方向和文字方向一致。
row-reverse: 元素摆放的方向和文字方向相反。
column: 元素从上放到下。
column-reverse: 元素从下放到上

注意：
- 调转行或列的方向后，flex-start和flex-end对应的方向也被调转了
- 当flex以列为方向时，justify-content控制纵向对齐，align-items控制横向对齐

---

4.order（顺序-控制单个元素）
可为正负值，元素的属性默认值为0

.child {
  order: 1;
}

---

5.align-self（同align-items-控制单个元素）

---

6.flex-wrap（换行）

nowrap: 所有的元素都在一行
wrap: 元素自动换成多行
wrap-reverse: 元素自动换成逆序的多行

注意：flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow

---

7.align-content（对齐方式）

flex-start: 多行都集中在顶部
flex-end: 多行都集中在底部
center: 多行居中
space-between: 行与行之间保持相等距离
space-around: 每行的周围保持相等距离
stretch: 每一行都被拉伸以填满容器