【css】快速上手Flexbox布局(理论讲解+实战) - 详解

Flexbox布局三剑客

flexbox布局的三大核心概念：

1. 方向（flex-direction）

flex-direction属性定义了主轴的方向，决定项目是水平排列还是垂直排列。
可选值：

• row（默认）：主轴为水平方向，项目从左到右排列。
• row-reverse：主轴为水平方向，项目从右到左排列。
• column：主轴为垂直方向，项目从上到下排列。
• column-reverse：主轴为垂直方向，项目从下到上排列。
  示例代码：

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

2. 主轴对齐属性（justify-content）

justify-content属性管理项目在主轴上的对齐和分布。
对齐类：

• flex-start（默认）：项目向主轴起点对齐。
• flex-end：项目向主轴终点对齐。
• center：项目在主轴上居中对齐。
  分布类：
• space-between：项目均匀分布在主轴上，两端不留空隙。
• space-around：项目两侧间距相等，项目之间空隙是其他间隔的一半。
• space-evenly：所有项目之间的间隔完全相等，包括两端。
  示例代码：

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

这样优化后的内容结构更清晰，描述更准确，方便读者理解和应用Flexbox布局。

3.交叉轴对齐（Align Items）

align-items 管理项目在交叉轴上的对齐方式。

1. stretch（默认值）
   效果：拉伸所有 Flex 项目，使其在交叉轴方向上填满整个容器的高度。

条件：只有当项目没有设置固定高度（或 min-height / max-height）时，拉伸才会生效。如果项目设置了高度，则会使用该高度。

视觉表现：所有项目看起来都一样高，并且和容器一样高。

• flex-start
  效果：所有项目在交叉轴上紧贴容器起始点对齐。

视觉表现：项目从顶部开始排列，高度由自身内容或高度属性决定。

• flex-end
  效果：所有项目在交叉轴上紧贴容器结束点对齐。

视觉表现：项目从底部开始排列，高度由自身内容或高度属性决定。

• center
  效果：所有项目在交叉轴上居中对齐。

视觉表现：项目在垂直方向上居中，高度由自身内容或高度属性决定。这是非常常用的一个值。

• baseline
  效果：所有项目根据它们文本的基线进行对齐。

视觉表现：无论每个项目的高度是否相同，它们的文字都会在同一水平线上对齐。这对于对齐不同字体大小的文本内容非常有用。

实战一下

掌握了基础知识，我们来个小案例实践以下，我们现在要制作如下的效果，想让他拥有一定的自适应，又不会变形很严重，应该怎么制作呢？

整体布局结构

• 使用嵌套 flex 布局实现两行四列的卡片布局
• 外层容器垂直排列，内层容器水平排列

主要布局代码分析

1. 外层容器 card-container

.card-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

• display: flex + flex-direction: column: 创建垂直方向的弹性布局
• gap: 16px: 设置子元素(两行)之间的垂直间距
• padding: 20px: 容器内边距，确保内容不贴边
• box-sizing: border-box: 盒模型计算包含padding和border

2. 行容器 card-row

.card-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  width: 100%;
}

• display: flex: 创建水平方向的弹性布局
• flex-wrap: nowrap: 禁止换行，强制所有卡片在一行内显示
• gap: 16px: 设置卡片间的水平间距
• width: 100%: 占满父容器宽度

3. 卡片项 card-item

.card-item {
  flex: 1 1 calc(25% - 12px);
  min-width: 300px;
}

• flex: 1 1 calc(25% - 12px):

• • flex-grow: 1: 有剩余空间时可以放大
  • flex-shrink: 1: 空间不足时可以缩小
  • flex-basis: calc(25% - 12px): 初始宽度为25%减去间隙占用空间

• min-width: 300px: 设置最小宽度，防止卡片过小

HTML结构说明

• cardList.slice(0, 4): 取前4个卡片用于第一行
• cardList.slice(4, 8): 取后4个卡片用于第二行
• 每行独立的 card-row 容器确保两行布局的稳定性

这种布局方式在 flex-wrap: nowrap 的约束下实现了稳定的两行四列布局，并具有良好的响应式特性。

完整代码

<script setup lang="ts">
  interface CardItem {
    id: number;
    title: string;
    description: string;
  }
  const cardList: CardItem[] = [
    { id: 1, title: '卡片一', description: '第一个功能卡片' },
    { id: 2, title: '卡片二', description: '第二个功能卡片' },
    { id: 3, title: '卡片三', description: '第三个功能卡片' },
    { id: 4, title: '卡片四', description: '第四个功能卡片' },
    { id: 5, title: '卡片五', description: '第五个功能卡片' },
    { id: 6, title: '卡片六', description: '第六个功能卡片' },
    { id: 7, title: '卡片七', description: '第七个功能卡片' },
    { id: 8, title: '卡片八', description: '第八个功能卡片' }
  ];
</script>

参考文献：

https://www.runoob.com/w3cnote/flex-grammar.html