CSS3 弹性盒子

弹性盒子

CSS 弹性盒子（ Flexible Box 或 flexbox）布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

更重要的是，弹性盒子布局的方向是不可知的，这个与常规的布局相反（块布局是垂直方向的而行内则是水平基准的），虽然方向这个概念对于pages来说很好，但是它缺乏灵活性来支持一些更大的更复杂的应用（尤其是当方向改变，尺寸变化，拉伸缩小时）

注意：弹性盒子模型更适用于组件化的应用以及小规模布局，大规模布局可以用Grid布局

注： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

容器属性

display

我们需要通过display属性来定义一个容器为Flexbox

display: flex; /* or inline-flex */

flex-direction

通过该属性可以定义容器内item主轴的方向，items就会沿着主轴排列。Flexbox是单方向布局模型。你可以考虑把容器内item横着排列或者竖着排列。

  flex-direction: row | row-reverse | column | column-reverse;

row（default）：横向正向排列
row-reverse：横向反向排列
column：纵向正向排列
column-reverse：纵向反向排列

flex-wrap-

默认情况下，弹性容器内的items倾向于在单行内布局。可以通过这个属性来允许容器尝试多行布局。

nowrap(default):只允许单行布局 wrap:允许多行布局 wrap-reverse：允许多行布局（反向）

flex-flow

这个属性只是上面两个属性缩写，默认属性是row nowrap：

justify-content

这个属性定义了items沿着主轴的排列方式，它可以帮助所有布局在一行的弹性item s合理的通过不同方式来使用剩余的空间，同时也会对溢出的items进行分配：

flex-start(default):左对齐（依据flex-direction）
flex-end：右对齐（同上）
start：左对齐（不过不是根据flex-direction，而是根据根元素的writing-mode属性，这是用于决定整个页面行布局的方向）
end：右对齐（同上）
left：左对齐（容器的左边沿，若flex-direction属性不适用，那具体表现等同start）
right：右对齐（同上）
center：居中
space-between：沿主轴方向，等间距排列，首末子组件与父组件相距0
space-around：沿主轴方向，等间距排列，首末子组件与父组件相距1/2个间距

align-items

这个定义了items沿着次轴（主轴交叉轴，例如主轴是X轴，次轴就是Y轴）的排列方式，具体内容和上面属性类似。

stretch（default）：拉伸item来充满容器，但遵守min-width和max-width属性
flex-start/start/self-start:左对齐，不同点在于根据flex-direction还是writing-mode
flex-end/end/self-end：右对齐，区别同上
center：居中
baseline：与基线对齐

---

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout