flex弹性盒子
flex 弹性布局文档 (opens new window)
# flex 模型说明
提示
当元素表现为 flex 框时，它们沿着两个轴来布局：
# 容器属性
# 组合样式动态演示
# flex-wrap 动态演示
提示
flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。
# flex-direction 动态演示
提示
flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。
注意
值 row 和 row-reverse 受 flex 容器的方向性的影响。如果它的 dir 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 dir 属性是 rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。
# flex-flow
提示
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
2
3
# justify-content 动态演示
提示
justify-content 属性定义了浏览器之间，如何分配顺着 弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间。
参数具体含义请参考文档 (opens new window)
# align-items 动态演示
提示
align-items 属性将所有直接子节点上的 align-self 值设置为一个组。align-self 属性设置项目在其包含块中在弹性容器交叉轴上的对齐方式。参数具体含义请参考文档 (opens new window)
# align-content 动态演示
提示
align-content 属性设置了浏览器如何沿着弹性盒子(flex)布局的纵轴和网格布局(grid)的主轴在内容项之间和周围分配空间。参数具体含义请参考文档 (opens new window)
# 容器中 item 块的属性
# order 排序演示
提示
order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局，默认值都为 0。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。。参数具体含义请参考文档 (opens new window)
# flex-grow 动态演示
提示
flex-grow 设置 flex 项 主尺寸 的 flex 增长系数。负值无效，默认为 0。
剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。
# flex-shrink 动态演示
提示
控制缩放，要超过容器以后才会有效果，不然不需要缩放。
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。负值无效，默认为 1。
# flex-basis 动态演示
提示
控制宽度，通过数值或者百分比两种方式。
flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数 。负值是不被允许的。默认为 auto。
当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了 height) , flex-basis 具有更高的优先级。
在下面的演示中，只有item-1: auto时，width-1 才会生效。
# flex 动态演示
提示
flex 是 flex-grow、flex-shrink、flex-basis 的简写。默认值：0 1 auto
可以使用一个，两个或三个值来指定 flex 属性。
单值语法: 值必须为以下其中之一：
- 一个无单位数(number): 它会被当作 flex:number 1 0; <flex-shrink>的值被假定为 1，然后<flex-basis> 的值被假定为 0。
- 一个有效的 宽度 (width) 值：它会被当作 <flex-basis> 的值。
双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：
- 一个无单位数：它会被当作 <flex-shrink> 的值。
- 一个有效的宽度值：它会被当作 <flex-basis> 的值。
三值语法：
- 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
- 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
- 第三个值必须为一个有效的宽度值，并且它会被当作 <flex-basis> 的值。
取值：
initial：相当于 flex: 0 1 auto，元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。
auto：相当于 flex: 1 1 auto，元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。
none：相当于 flex: 0 0 auto，元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。
# align-self 动态演示
提示
align-self 会对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值。
align-self 属性不适用于块类型的盒模型和表格单元。如果任何 flexbox 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。