关于flex弹性布局的学习记录与详解
flex弹性布局基础：
- 给一个容器设置display：flex或者inline-flex可以用于设置容器的子元素如何分配空间；
- flex属性是flex-grow，flex-shrink，flex-basis的简写属性；
- 当元素不是弹性盒模型的子元素，则flex属性不生效；
- flex属性规定了弹性元素该如何上场伸长或缩短以适应flex容器中的空间；
- 大多数时候将flex设置为auto，initial，none或者一个无单位正数；
- 默认情况下，元素不会缩短至小于内容框尺寸，软香改变这一情况，可以设置元素的min-width和min-height；
- flex 属性可以指定1个，2个或3个值。
取值语法：
单值语法:
- 值必须为以下其中之一:
- 一个无单位数: 它会被当作<flex-grow>的值；
- 一个有效的宽度width值: 它会被当作 <flex-basis>的值；
- 关键字none，auto或initial。
双值语法:
-
第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：
- 一个无单位数：它会被当作 [<flex-shrink>] 的值。
- 一个有效的宽度值: 它会被当作 [<flex-basis>] 的值。
三值语法:
- 第一个值必须为一个无单位数，并且它会被当作 [<flex-grow>]的值。
- 第二个值必须为一个无单位数，并且它会被当作 [<flex-shrink>]的值。
- 第三个值必须为一个有效的宽度值， 并且它会被当作 [<flex-basis>]的值。
取值节：
initial
- 元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"flex: 0 1 auto"。
auto
- 元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".
none
- 元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。
- 当initial和none没有内容时，不会展示也就是flex-grow设为0；
<'flex-grow'>
定义 flex 元素的 flex-grow 属性，该属性定义弹性盒子项（flex item）的拉伸因子。。默认值为 0，负值无效。
<'flex-shrink'>
- 定义 flex 元素的 flex-shrink属性该属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。默认值为1，负值无效。
<'flex-basis'>
- 定义 flex 元素的 flex-basis属性；该属性指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。则必须加上单位，以免被视作伸缩性。 默认值为 auto。
- 当使用一个或两个无单位数时, flex-basis会从auto变为0.
flex的样式进阶：
justify-content：
- justify-content属性能水平对齐元素，并接受这些参数：
- flex-start: 元素和容器的左端对齐；
- flex-end: 元素和容器的右端对齐；
- center: 元素在容器里居中；
- space-between:元素之间保持相等的距离；
- space-around:元素周围保持相等的距离；
align-items：
- align-items属性纵向对齐元素并且可选以下几个值：
- flex-start: 元素与容器的顶部对齐。
- flex-end: 元素与容器的底部对齐。
- center: 元素纵向居中。
- baseline: 元素在容器的基线位置显示。
- stretch: 元素被拉伸以填满整个容器。
flex-direction：
- flex-direction属性定义了元素在容器里摆放的方向，并且接受这些值：
1.row：元素摆放的方向和文字方向一致。- row-reverse：元素摆放的方向和文字方向相反。（注意当你调转行或列的方向后，柔性启动和柔性端对应的方向也被调转了。）
- column：元素从上放到下。
- column-reverse：元素从下放到上。
order
- 有时候仅仅调转行或列的方向是不够的。在这些情况，可以我们设置单个元素的order属性。元素的属性默认值为0，但是我们设置这个属性为正数或负数。
用order来调整的顺序。 - 例如：
.lch{
order 15;
order -10;
}
align-self：
- 可以使用的控制单个元素的属性是align-self属性，align-self属性接受align-items一样的那些值：
- flex-start: 元素与容器的顶部对齐；
- flex-end: 元素与容器的底部对齐；
- center: 元素纵向居中；
- baseline: 元素在容器的基线位置显示；
- stretch: 元素被拉伸以填满整个容器。
flew-wrap
- flex-wrap属性把内容分散，这个属性接受这些值：
- nowrap：所有的元素都在一行；
- wrap：元素自动换成多行；
- wrap-reverse：元素自动换成逆序的多行。
- flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。举个例子，可以你用flex-flow: row wrap去设置行并自动换行。
align-content：
- align-content属性可以用来决定行与行之间隔多远，align-content属性接受这些值：
- flex-start：多行都集中在顶部；
- flex-end：多行都集中在底部；
- center：多行居中；
- space-between：行与行之间保持相等距离；
- space-around：每行的周围保持相等距离；
- stretch：每一行都被拉伸以填满容器。
- 这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。
- 只有一行的时候align-content没有任何效果。
