前言

在现代网页设计中，布局是一个至关重要的环节，在过去的一段时间里，页面的布局还都是通过table、float、定位以及其他的 CSS 属性来完成的，随着用户需求的不断变化和设备种类的多样化，旧的布局方式难以满足各种场景的需求，Flex的出现很大程度地缓解了这种现象，这是一种非常强大的布局工具，可用于实现各种复杂的网页布局及响应式设计

Flex布局

Flex，全称为Flexible Box，意为弹性布局，是CSS3的一种布局模式，可用于设计灵活的响应式布局

Flex是在2009年，由W3C提出的，作为CSS3规范的一部分，最早的Flex规范被称为"Box Alignment for User Interface Layout"，随后经历了多个版本的修改和改进，在2012年基本成型，最终在2017年定稿并成为W3C的正式推荐标准

其兼容性如下(几乎主流的现代化浏览器均支持)：

基本概念

任意元素都可使用Flex布局，只需设置display属性为flex或inline-flex即可，如：

采用Flex布局的元素，可称为Flex容器(flex container)，作为父元素，其内的所有直接子元素自动转换为Flex项目(flex item)

轴

Flex项目的主要根据Flex容器的两根轴进行排列和对齐

主轴(Main Axis)

是Flex容器中定义的主要布局轴，默认情况下，主轴是水平向右的，Flex项目会从左到右排列，其在主轴上占据的尺寸称为主尺寸(main size)

交叉轴(Cross Axis)

是与主轴垂直的轴，默认情况下，交叉轴是垂直向下的，交叉轴的方向取决于主轴的方向，Flex项目在交叉轴上占据的尺寸称为交叉尺寸(cross size)

容器属性

下列属性主要应用于Flex容器上

flex-direction

flex-direction属性可以改变主轴的方向，即决定Flex项目的排列方向

常见的flex-direction值包括：

• row：(默认值)水平，从左到右
• row-reverse：水平，从右到左
• column：垂直，从上到下
• column-reverse：垂直，从下到上

justify-content

该属性主要决定项目在主轴上的对齐方式，可能值如下：

• flex-start：(默认值)从主轴起点开始排列
• flex-end：从主轴终点开始排列
• center：在主轴上居中排列
• space-between：项目之间平均分布，项目之间的间隔相等
• space-around：项目之间的间隔相等，项目两端的间隔为项目之间间隔的一半
• space-evenly：项目之间和项目两端的间隔相等

align-items

该属性主要决定项目在交叉轴上的对齐方式

• stretch：(默认值)如果项目未设置高度或设置为auto，则将其拉伸以填满容器
• flex-start：从交叉轴起点开始排列
• flex-end：从交叉轴终点开始排列
• center：在交叉轴上居中排列
• baseline：根据项目的文本基线对齐(适用于包含文本的项目)

flex-wrap

默认情况下，所有项目都按主轴排列为一行，不允许换行，flex-wrap用于决定当一行容不下时，如何换行，可能值有：

• nowrap：(默认值)所有项目都在一行上排列，不换行
• wrap：项目在必要时换行，新行在下方
• wrap-reverse：项目在必要时换行，新行在上方

align-content

该属性用于控制多行项目在交叉轴上的对齐方式，只在多行布局有效，即当 flex-wrap 属性设置为 wrap 或 wrap-reverse 时才会生效，其常见可能值为：

• stretch：(默认值)多行项目在交叉轴上拉伸以填充整个容器的高度
• flex-start：多行项目在交叉轴的起点对齐
• flex-end：多行项目在交叉轴的终点对齐
• center：多行项目在交叉轴上居中对齐
• space-between：多行项目在交叉轴上均匀分布，首行和末行与容器的起点和终点对齐，行与行之间的间隔相等
• space-around：多行项目在交叉轴上均匀分布，行与行之间的间隔相等，首行和末行与容器的起点和终点的间隔是间隔的一半

flex-flow

该属性是flex-direction和flex-wrap的简写形式，默认值为row nowrap，形式如下：

项目属性

下列属性主要应用于Flex项目上

order

该属性定义项目的排列顺序；数值越小，排列越靠前，默认为0

如上图，HTML结构中三个项目按1、2、3顺序书写，但实际渲染则是按order数值从小到大的顺序显示

flex-grow

该属性定义项目的放大比例，接收正整数数值，默认为0，即不放大

当容器存在剩余空间时，会将剩余空间按设置了flex-grow值的项目按其值的比例分配给这些项目

如上图，正常情况下排列，当容器空间富裕时，会有剩余空间，默认不分配(不做处理)

当项目2设置了flex-grow值后，容器会将剩余空间分配给项目2

当项目3设置了flex-grow值为2后，容器会将剩余空间按1:2的比例分配给项目2和项目3

flex-shrink

该属性用于定义项目的缩小比例，默认为1，即如果空间不足，项目将被压缩

如果容器中的项目总宽度超过容器的宽度，那么根据各自的flex-shrink值，项目会以一定的比例进行被压缩

• 值为 0： 项目不会被压缩，始终保持初始尺寸，即使容器空间不足
• 正整数值： 项目会根据这个值进行比例收缩

如上图，当项目数量不多时，容器空间有富余，项目正常显示

当项目数量较多时，项目宽度按比例被压缩

当flex-shrink值设为0后，则项目不会被压缩，依旧按原宽度显示，甚至超出容器

flex-basis

该属性用于设置项目的初始主尺寸(main size)，定义了项目在未进行放大或缩小之前，占据的空间大小，值可以是数值(如 px、%、em 等)或 auto(默认值)

如上图，设置项目3的flex-basis值为50%，在容器空间富余情况下，项目3占据容器50%的空间

flex

该属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto；后两个属性可选(即只设置一个值时，其为flex-grow属性的值)

其形式如下：

align-self

该属性用于设置单个项目使用与其他项目不一样的对齐方式(在交叉轴上的对齐方式)，可覆盖align-items属性

• auto：(默认值)表示继承容器的align-items属性
• stretch：项目在交叉轴上拉伸以填充容器
• flex-start：项目在交叉轴的起点对齐
• flex-end：项目在交叉轴的终点对齐
• center：项目在交叉轴上居中对齐
• baseline：项目在交叉轴上的基线对齐，即项目的文本基线对齐

特点

一维布局： Flex主要应用于单行或单列上的布局，通过设置主轴和交叉轴来控制元素的排列方式

自适应和响应式设计： Flex设计目的之一是帮助开发者创建响应式布局，适应不同尺寸的屏幕和设备，使网页在移动设备和桌面上均能良好显示

顺序控制： 通过order属性可以轻松改变项目的显示顺序，不必改变 HTML 结构，从而更加灵活地管理页面布局

弹性适应： 使用flex-grow和flex-shrink属性可以控制项目在空间不足或有多余空间时的弹性表现

对齐和分布控制： 通过justify-content和align-items可以精确控制元素在主轴和交叉轴上的对齐方式，如居中、靠边、分布等

使用场景

Flex适用于许多不同的场景和布局需求，特别是对于那些需要灵活性和响应式设计的项目，以下列举一些典型的使用场景：

• 导航菜单和工具栏： 使用Flex可以轻松实现水平或垂直导航菜单，项目的自动对齐和间距控制使得设计更加简洁和一致
• 网页布局的各种部分： 无论是页头、页脚还是内容区域，Flexbox都能提供灵活的布局控制，适应不同尺寸的屏幕和设备
• 卡片式布局： 需要展示多个卡片或面板并希望它们在同一行或列上均匀分布时，Flexbox提供了理想的解决方案
• 响应式设计： 由于Flex的自适应性，特别适合构建响应式设计的布局，使得网页能够在不同尺寸和设备上都有良好的显示效果
• 表单布局： 在表单设计中，Flex可以帮助将表单元素对齐并有效地利用空间，提升用户体验和操作效率
• 页面组件的排列： 如页眉、页脚、侧边栏等页面组件的布局，Flex可以使得这些组件在各种屏幕尺寸下都能优雅地展示和布局
• 垂直居中： 使用Flex可以轻易地实现垂直居中的效果

总体来说，Flex是一种功能强大且易于使用的布局模型，适用于不同的设计和开发场景，在现代化的项目构建中，多用Flex布局，能够显著简化布局的实现和维护工作