web前端移动端最流行的网页布局技术：flexbox弹性布局学习详解 _flexbox

我们的 css flexbox 布局综合指南。这份完整的指南解释了有关 flexbox 的所有内容，重点介绍了父元素（flex 容器）和子元素（flex 项）的所有不同可能属性。它还包括历史、演示、模式和浏览器支持图表。

文章插图

弹性布局的诞生背景（Flexbox LayoutFlexible Box）模块（截至 2017 年 10 月的 W3C 候选推荐）旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知和/或动态（因此词“弯曲”）。
flex 布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间（主要是为了适应各种显示设备和屏幕尺寸）。弹性容器扩展项目以填充可用的可用空间或缩小它们以防止溢出。
最重要的是，与常规布局（基于垂直地块和基于水平的内联）相比，flexbox 布局与方向无关。虽然这些适用于页面，但它们缺乏灵活性（不是双关语）来支持大型或复杂的应用程序（尤其是在涉及方向更改、调整大小、拉伸、收缩等方面）。
注意： Flexbox 布局最适合应用程序的组件和小规模布局，而Grid布局适用于更大规模的布局。
基础知识和术语由于 flexbox 是一个完整的模块而不是单个属性，它涉及到很多东西，包括它的整个属性集。其中一些是要设置在容器上（父元素，称为“flex container”），而其他是要设置在子级（称为“flex items”）上。
如果“常规”布局基于块流方向和内联流方向，则弹性布局基于“弹性流方向” 。请看一下规范中的这张图，解释了 flex 布局背后的主要思想。
解释 flexbox 术语的图表。穿过flexbox主轴的尺寸称为主尺寸，另一个方向是横向尺寸。这些尺寸有一个主开始、主结束、交叉开始和交叉结束。
项目将按照main axis(from main-startto main-end) 或横轴 (from cross-startto cross-end) 排列。

主轴——弹性容器的主轴是弹性项目沿其布置的主轴。请注意，它不一定是水平的；这取决于flex-direction属性（见下文）。
主启动 | main-end – 弹性项目放置在容器内，从 main-start 开始到 main-end 。
主尺寸——一个弹性项目的宽度或高度，无论是在主尺寸，还是项目的主要尺寸。弹性项目的主要尺寸属性是“宽度”或“高度”属性，以主要尺寸中的为准。
交叉轴——垂直于主轴的轴称为交叉轴。它的方向取决于主轴的方向。
交叉启动| cross-end – 弹性线填充了项目，并从弹性容器的交叉开始侧开始放置到容器中，并朝向交叉端侧。
cross size – 弹性项目的宽度或高度，以交叉维度为准，是项目的交叉大小。横向尺寸属性是横向尺寸中的“宽度”或“高度”中的任何一个。

弹性盒属性父级（弹性容器）的属性展示这定义了一个弹性容器；内联或块取决于给定的值。它为其所有直接子级启用了弹性上下文。
.container {display: flex; /* or inline-flex */}请注意，CSS 列对 flex 容器没有影响。
弹性方向这建立了主轴，从而定义了弹性项目放置在弹性容器中的方向。Flexbox 是（除了可选的包装）一个单向布局的概念。将弹性项目视为主要以水平行或垂直列布局。
.container {flex-direction: row | row-reverse | column | column-reverse;}

row（默认）：从左到右ltr；从右到左rtl
row-reverse：从右到左ltr；从左到右rtl
column: 相同，row但从上到下
column-reverse: 相同，row-reverse但从下到上

弹性包装