弹性盒子

弹性盒子的相关词汇

弹性容器的属性

使用display: flex; 或者display: inline-flex; 来设置弹性容器，flex是一个块级元素，inline-flex是一个行内元素

flex-flow 属性是 flex-direction 和 flex-wrap 的简写

flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

row

flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。

row-reverse

表现和row相同，但是置换了主轴起点和主轴终点

column

flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同

column-reverse

表现和column相同，但是置换了主轴起点和主轴终点

flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。

nowrap

flex 的元素被摆放到到一行，这可能导致溢出 flex 容器。 

wrap

flex 元素 被打断到多个行中。cross-start 会根据 flex-direction 的值选择等于start 或before。cross-end 为确定的 cross-start 的另一端。

wrap-reverse

和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。

justify-content 属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。

 

flex-start

从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。

flex-end

从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。

center

伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。

space-between

在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。

space-around

在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

 

align-content属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

只有在flex-wrap:wrap 或者flex-wrap:wrap-reverse 才生效，因为在不换行的情况下纵轴不会有多列的情况，align-content也就调整位置，只能用align-item来调整纵轴的位置

flex-start

所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。

flex-end

所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。

center

所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。

space-between

所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。

space-around

所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。

stretch

拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行, ( wrap要使用align-item:stretch 和 align-content:stretch 才能拉伸

align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。

只有在flex-wrap:nowrap 才生效, 换行后请使用 align-content

flex-start

元素向侧轴起点对齐。

flex-end

元素向侧轴终点对齐。

center

元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。

baseline

所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。

stretch

弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

弹性项目

flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。

flex-grow 属性定义弹性盒子项（flex item）的宽度拉伸因子，默认为0，不拉伸，上面的align-item 和 align-content 是高度拉伸

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。默认值1（元素永远不会超出容器宽度）

flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用  box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。默认值auto

当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级.

align-self 会对齐当前 flex 行中的 flex 元素，并覆盖已有的align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。In Grid, it aligns the item inside the grid area. 在Flexbox中会按照cross axis (当前flex 元素排列方向的垂直方向) 进行排列.

 

 

order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。