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无效。

flex-box和flex-item

主轴和副轴