Flex容器通过display: flex或inline-flex创建，子元素沿主轴与交叉轴排列，利用justify-content、align-items等属性实现灵活布局，适用于一维结构如导航栏、居中对齐等场景。

Flex容器是CSS中一种强大的布局模式，用来更高效地排列、对齐和分配容器内子元素的空间，特别是当空间不确定或动态变化时。理解Flex容器，关键在于掌握它的两个核心：容器本身和其内部的弹性子项（flex items）。

什么是Flex容器

当你给一个元素设置 display: flex 或 display: inline-flex 时，这个元素就变成了一个Flex容器。它的所有直接子元素会自动成为“弹性子项”，并按照Flexbox规则进行布局。

主轴与交叉轴的概念

Flex布局基于两个垂直的轴：主轴（main axis）和交叉轴（cross axis）。子元素默认沿着主轴排列。

常用容器属性说明

Flex容器提供了多个属性来控制子项的排列方式：

实际使用建议

Flex布局适合用于一维布局场景，比如导航栏、卡片排列、居中对齐等。

• 子项大小不一但想均匀分布？用 justify-content: space-around 或 space-evenly

基本上就这些。掌握Flex容器的核心思路：设置容器为flex，明确主轴方向，再通过对齐属性控制子项位置。不复杂但容易忽略的是轴的概念，一旦理解，布局会变得非常直观。