什么是 Flex 布局？

Flexbox（弹性盒子布局）是 CSS3 中的一种强大的布局模式，它能够更高效地、更灵活地排列、对齐和分配容器内项目的空间，即使它们的大小是未知或者动态变化的。 与传统的布局方式相比，Flexbox 提供了更简洁的解决方案来处理对齐、方向和顺序等问题。

基本示例

项目 1
项目 2
项目 3
项目 4
.container {
  display: flex;
}

.flex-item {
  flex: 1;
}

Flex 容器属性

flex-direction
定义主轴的方向，决定子元素的排列方式。可选值：row（默认）、row-reverse、column、column-reverse。
flex-wrap
控制子元素是否换行。可选值：nowrap（默认）、wrap、wrap-reverse。
justify-content
在主轴上对齐子元素。可选值：flex-start、flex-end、center、space-between、space-around、space-evenly。
align-items
在交叉轴上对齐子元素。可选值：stretch（默认）、flex-start、flex-end、center、baseline。
align-content
多行交叉轴上的对齐方式。可选值：stretch（默认）、flex-start、flex-end、center、space-between、space-around。
gap
设置子元素之间的间距。可以是单个值或两个值（行间距和列间距）。

交互式演示 - 调整容器属性

项目 1
项目 2
项目 3

Flex 项目属性

flex-grow
定义项目的放大比例，默认为0。如果所有项目的 flex-grow 都为1，它们将等分剩余空间。
flex-shrink
定义项目的缩小比例，默认为1。如果空间不足，该项目将缩小。
flex-basis
定义在分配多余空间之前，项目占据的主轴空间。可以是长度值或百分比。
flex
flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。
align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
order
定义项目的排列顺序，数值越小，排列越靠前，默认为0。

项目属性示例

flex: 1
flex: 2
flex: 3
固定宽度 200px

响应式布局应用

Flexbox 是创建响应式布局的强大工具。通过结合媒体查询和 Flex 属性，我们可以轻松创建适应不同屏幕尺寸的布局。

响应式导航栏

在小屏幕上，这个导航栏会自动调整为垂直布局，确保良好的移动端体验。

卡片网格布局

卡片 1
卡片 2
卡片 3
卡片 4