Flexbox布局模型能高效实现灵活对齐与分布，通过display:flex创建弹性容器，子元素沿主轴排列，支持flex-direction调整方向，justify-content和align-items控制对齐，flex属性调节伸缩性。

如果您在编写网页布局时发现传统的浮动或定位方式难以实现灵活的对齐与分布效果，可以考虑使用CSS中的Flexbox布局模型。它能帮助您更高效地设计响应式容器内容排列方式。

本文运行环境：MacBook Pro，macOS Sonoma

一、Flex的基本概念

Flex是“Flexible Box”的缩写，即弹性盒子布局模块，旨在提供一种更有效的方式来分配容器内子元素的空间和对齐方式。当容器设置为flex布局后，其直接子元素将自动成为弹性项目，并根据可用空间进行伸缩调整。

二、启用Flex容器

要使用Flex布局，首先需要将一个元素定义为弹性容器。通过设置display属性为flex或inline-flex即可激活该容器的弹性布局模式。

1、在CSS中选择目标父元素并添加 display: flex; 声明。

2、此时该元素内部的所有直接子元素会默认沿主轴方向（水平从左到右）排列。

3、若需行内级弹性容器，可使用 display: inline-flex; 代替。

三、主轴与交叉轴控制

弹性布局的核心在于主轴（main axis）和交叉轴（cross axis）的方向设定。通过flex-direction属性可以改变主轴的方向，从而影响子元素的排列顺序。

1、使用 flex-direction: row; 设置主轴为水平方向（默认值）。

2、使用 flex-direction: column; 将主轴设为垂直方向，使子元素纵向堆叠。

3、还可选择 row-reverse 或 column-reverse 实现反向排列。

四、对齐方式设置

通过justify-content和align-items属性，可以分别控制主轴和交叉轴上的对齐行为，让布局更加精确可控。

1、使用 justify-content: center; 可使子元素在主轴上居中对齐。

2、使用 align-items: center; 可实现子元素在交叉轴上的居中对齐。

3、其他常用值包括 flex-start、flex-end 和 space-between 等，用于不同对齐需求。

五、弹性项目伸缩性调节

每个弹性子元素可通过flex-grow、flex-shrink和flex-basis属性独立控制其扩展、收缩能力及基础尺寸。

1、设置 flex-grow: 1; 表示该项目可占据所有剩余空间。

2、多个项目同时设置grow值时，按比例分配多余空间。

3、使用 flex: 1 1 auto; 是常见简写形式，等同于分别设置三个属性。