CSS flex
目录
flex-box和flex-item
主轴和副轴
编辑
flex-box的属性
flex-direction
flex-wrap
flex-flow
justify-content
编辑align-items
align-content
flex-item的属性
flex-basis
flex-grow
flex-shrink
flex
flex-box和flex-item
当把一个块级元素的display设置为flex时，这个块级元素就成为了flex-box，flex-box也称为flex-container、盒子、容器等，
flex-box内部的所有子块级元素都是flex-item，flex-item也称为项目等
主轴和副轴
默认主轴是水平轴，副轴是垂直轴，副轴也叫交叉轴，
轴可以影响item的排列
原始代码：
<div class="flex-box"><h2>test</h2><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">4</div><div class="flex-item">5</div><div class="flex-item">6</div><div class="flex-item">7</div><div class="flex-item">8</div><div class="flex-item">9</div><div class="flex-item">10</div><div class="flex-item">11</div><div class="flex-item">12</div><div class="flex-item">13</div><div class="flex-item">14</div><div class="flex-item">15</div></div><style>.flex-box{background-color: aqua;width: 1000px;height: 200px;display: flex;}.flex-item{background-color: blue;width: 100px;height: 100px;border: 1px solid gray;font-size: 50px;}</style>
初始设置了box的width是1000px，内部每个item的width是100px，但是15个item的width超过box的width了，item的width自动缩小了，为什么会导致这种现象，与flex-grow、flex-shrink、flex-basis的默认值有关，默认值为0 1 auto，元素不会自动扩展，但是会按比例收缩。
flex-box的属性
flex-direction
flex-direction定义了主轴的方向，内部的item在主轴方向上会按设定的方向排列。
flex-direction:row
flex-direction:row-reverse
flex-direction:column
flex-direction:column-reverse
flex-direction:initial
默认值，为row
flex-wrap
指定 flex 元素单行显示还是多行显示。
flex-wrap:nowarp
不换行。flex 的元素被摆放到到一行，这可能导致 flex 容器溢出，为默认值。
flex-wrap:warp
换行。flex 元素 被打断到多个行中。
flex-wrap:warp-reverse
换行、倒序。
flex-flow
是 flex-direction 和 flex-wrap 的简写。
比如flex-flow:column-reverse wrap
justify-content
定义浏览器如何沿着弹性容器的主轴分配内容元素之间和周围的空间。
这里为了展示出效果，把item数降到六个了。
justify-content:start
从行首开始排列。每行第一个元素与行首对齐，同时所有后续的元素与前一个对齐。
justify-content:end
从行尾开始排列。每行最后一个元素与行尾对齐，同时所有前面的元素与后一个对齐。
justify-content:flex-start
和start效果是一样的。flex-start只用于flex容器。
justify-content:flex-end
元素紧密地排列在弹性容器的主轴结束侧。仅应用于弹性布局的元素。对于不是弹性容器里的元素，此值将被视为end。
和end效果是一样的。
justify-content:center
伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
justify-content:left
左对齐。
justify-content:right
右对齐。
justify-content:space-between
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
justify-content:space-around
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
justify-content:space-evenly
flex 项都沿着主轴均匀分布在指定的对齐容器中。相邻 flex 项之间的间距，主轴起始位置到第一个 flex 项的间距，主轴结束位置到最后一个 flex 项的间距，都完全一样。
justify-content:stretch
虽然弹性盒子支持strech属性，但将其应用于弹性盒子时，由于拉伸是由flex属性控制的，所以stretch的行为与start相同。
align-items
控制子元素在副轴上的对齐。
align-items:flex-start
将item与 flex 容器的主轴起点或副轴起点对齐。
align-items:flex-end
将item与 flex 容器的主轴末端或副轴末端对齐。
align-items:center
flex 元素的外边距框在交叉轴上居中对齐。如果元素的交叉轴尺寸大于 flex 容器，它将在两个方向上等距溢出。
align-items:start
将元素与容器的主轴起点或交叉轴起点对齐。和flex-start一样。
align-items:end
将元素与容器的主轴末端或交叉轴末端对齐。和flex-end一样。
align-items:stretch
如果（多个）元素的组合大小小于容器的大小，其中自动调整大小的元素将等量增大，以填满容器，同时这些元素仍然保持其宽高比例的约束。
但单独设置stretch不会生效。
总的来说：
align-content
当flex-box的flex-wrap为wrap时生效。
align-content:start
所有行从容器的起始边缘开始填充。
align-content:end
所有行从容器的结束边缘开始填充。
align-content:flex-start
所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
align-content:flex-end
所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
align-content:center
所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
align-content:normal
这些项按默认位置填充，就像没有设置对齐内容值一样。
总的来说：
flex-item的属性
flex-basis
指定了 flex 元素在主轴方向上的初始大小。
当一个元素同时被设置了flex-basis (除值为auto外) 和width(或者在flex-direction:column情况下设置了height) ，flex-basis具有更高的优先级。
默认值为auto。
flex-basis:数字
设置px：设置的是对应item的width。
设置百分比：设置的是对应item的width。百分比是相对于父元素的width。
flex-basis:auto：width等于item本身的width。
flex-grow
用来规定弹性元素在有多余空间时的扩展比例。
是一个无单位的数值，默认值为0，这意味着元素不会主动扩展以填满多余空间。
若设置为大于0的值，元素就会按比例扩展。例如，有两个元素，一个flex-grow为1，另一个为2，那么后者扩展的空间会是前者的两倍。
flex-shrink
规定弹性元素在空间不足时的收缩比例。同样是无单位的数值，默认值为1，表示元素会按照比例收缩。若设置为0，元素就不会收缩。
flex
flex-grow flex-shrink flex-basis的简写形式。
flex:initial
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为flex:0 1 auto
flex:auto
元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为flex:1 1 auto
flex:none
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为flex:0 0 auto
可以使用一个，两个或三个值来指定flex属性。
单值语法：
一个有效值：
若该值相当于有效flex-grow，该值相当于设置flex-grow，此时简写会扩展为flex:flex-grow 1 0.
若该值相当于有效flex-basis，该值相当于设置flex-basis，此时简写会扩展为flex:1 1 flex-basis
两个有效值：
第一个值必须是flex-grow有效值。
第二个值若为flex-shrink有效值，此时简写会扩展为flex:flex-grow flex-shrink 0
第二个值若为flex-basis有效值，此时简写会扩展为flex:flex-grow 1 flex-basis
三个有效值：
依次对应flex-grow、flex-shrink、flex-basis。
flex-grow值的设置：
负值无效。省略时默认值为 1。 (初始值为 0)
flex-shrink值的设置：
负值无效。省略时默认值为1。 (初始值为 1)
flex-basis值的设置：
若值为0，则必须加上单位，以免被视作伸缩性。省略时默认值为 0。(初始值为 auto)
auto相当于按照元素本身的大小来。
0表示按元素的内容撑开来，设置的width无效。