Flexbox 疏理学习

原文链接: [教程](http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html)

2020-05-18 补充：弹性盒子只作用于顶层子元素！！！

1.Flexbox（弹性布局）

a.使用弹性布局默认不会改变元素的宽度

b.弹性布局默认左对齐

c.弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度

2.flex-grow

a.拉伸元素宽度，默认为 0，不拉伸，设置为 1 表示占据当前行的所有剩余宽度

b.可以设置为 0-1 之间的小数

3.align-self（纵轴！自我对齐）

• flex-start：顶边对齐，高度不拉伸

• flex-end：底边对齐，高度不拉伸

• center：居中，高度不拉伸

• stretch：默认值，高度自动拉伸

4.align-items（纵轴！对齐多个项目）

如果项目很多，一个个地设置align-self属性就很麻烦。

这时，可以在容器元素（本例为表单）设置align-items属性，它的值被所有子项目的align-self属性继承。

form {
  display: flex;
  align-items: center;
}

上面代码中，<form>元素设置了align-items以后，就不用在控件上设置align-self，除非希望两者的值不一样。

5.justify-content（横轴！内容对齐）

• flex-start: 元素和容器的左端对齐。

• flex-end: 元素和容器的右端对齐。

• center: 元素在容器里居中。

• space-between:元素之间保持相等的距离。

• space-around:元素周围保持相等的距离。

5.1.align-content（纵轴！内容对齐）

• flex-start: 多行都集中在顶部。

• flex-end: 多行都集中在底部。

• center: 多行居中。

• space-between: 行与行之间保持相等距离。

• space-around: 每行的周围保持相等距离。

• stretch: 每一行都被拉伸以填满容器。

• align-content 决定行之间的间隔，

• align-items 决定元素整体在容器的什么位置。

• 只有一行的时候 align-content 没有任何效果。

6.flex-direction（定义主轴的方向）

• row: 元素摆放的方向和文字方向一致。

• row-reverse: 元素摆放的方向和文字方向相反。

• column: 元素从上放到下。

• column-reverse: 元素从下放到上。

7.order 属性

有时候仅仅调转行或列的方向是不够的。

在这些情况，我们可以设置单个元素的order属性。

元素的属性默认值为0，但是我们设置这个属性为正数或负数。

* 值越大越靠后

8.flex-wrap（指定 flex 项目换行，默认不换行 nowrap）

• nowrap: 所有的元素都在一行。

• wrap: 元素自动换成多行。

• wrap-reverse: 元素自动换成逆序的多行。

9.flex-flow（flex-direction 和 flex-wrap 的缩写）

flex-flow: <flex-direction> <flex-wrap>

第一个参数是 flex-direction，第二个参数是 flex-wrap