css中flex是什么

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; 将主轴设为垂直方向，使子元素纵向堆叠。

标签： css macbook mac ai macos 弹性布局 flex布局 cos 排列 网页布局