html中的box布局,CSS3 Flexbox 布局完全指南(图解 Flexbox 布局详细教程)

背景

Flexbox 布局(也叫Flex布局，弹性盒子布局)模块( W3C 候选推荐，截止到2017年10月)旨在提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。

Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度(和排列顺序)，从而能够最好地填充可用空间(主要是为了适应所有类型的显示设备和屏幕尺寸)。flex布容器能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。

最重要的是，flexbox布局与方向无关，不同于常规布局(基于垂直的块(block)和基于水平的内联(inline))。 虽然传统布局适用于页面，但它们对于大型或复杂的应用程序布局来说缺乏灵活性(特别是在改变方向，调整大小，拉伸，收缩等方面)。

注: Flexbox布局最适合应用程序的组件和小规模布局，而 Gird 布局则适用于较大规模的布局。 (注：CSS Grid VS Flexbox 比较及适用情况可以查看 这篇文章 中 “CSS Grid VS Flexbox VS Table 布局，比较及适用情况” 部分)。

基础知识和术语

flexbox 布局是一个完整的布局模块而不是一个单独的属性，因此它涉及很多东西，包括它的整个属性集。 其中有的属性是在容器(container，也可以叫做父元素，称为flex container)上设置的，有的则是在容器的子元素(item，也可以叫做子元素，称为flex items)设置。

(注：本文统一翻译成 “flex 容器” 和 “flex 项” )。

如果 “常规”布局基于 block(块) 和 inline(内联) 流动方向，flex 布局则是基于 “flex-flow(弹性流动)” 方向。请在规范中看一下这个图片，解释flex布局背后的主要思想。

在flex布局中，flex 项(就是子元素)要么按照 main axis(主轴)(从 main-start 到 main-end )排布，要么按照cross axis(交叉轴) (从 cross-start 到cross-end)排布。

main axis: flex 容器的主轴，flex 项沿着主轴排布，注意主轴不一定是水平的，主轴是水平还是垂直取决于 flex-direction 属性(见下文)。

main-start|main-end: 分别表示主轴的开始位置和结束位置，flex 项在容器中会从 main-start 到 main-end 排布。

main size: flex 项占据主轴的宽度或高度。flex 项的 main size 属性是要么是“宽度”，要么是“高度”，这取决于主轴方向。

cross axis: 垂直于主轴的轴线称为交叉轴，其方向取决于主轴方向。

cross-start|cross-end: 分别表示交叉轴的开始位置和结束位置。flex 项在交叉轴上的排布从 cross-start 开始位置到 cross-end 结束位置。

cross size: flex 项占据交叉轴的宽度或高度。flex 项的 cross size 属性是要么是“宽度”，要么是“高度”，这取决于交叉轴方向。

父元素属性(flex container)

display

用来定义一个 flex 容器。如果设置为 flex 则容器呈现为块状元素，设置为inline-flex 则容器呈现为行内元素。它为所有直接子元素提供了 flex 上下文。

.container {

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

}

请注意，CSS 列对 flex 容器没有影响。当然这是 Flexbox 布局的开始。

flex-direction

flex-direction 属性确立了主轴，从而定义了 flex 项在 flex 容器中的排布方向。 Flexbox 是单向布局，有些时候我们也称作一维布局。 可以将 flex 项视为主要沿着水平行或垂直列排布。

.container {

flex-direction: row