CSS【详解】弹性布局 flex

news2025/5/22 20:06:35

适用场景

一维（行或列）布局

基本概念

包裹所有被布局元素的父元素为容器
所有被布局的元素为项目
项目的排列方向（垂直/水平）为主轴
与主轴垂直的方向交交叉轴

在这里插入图片描述

容器上启用 flex 布局

将容器的 display 样式设置为 flex 或 inline-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

仅在 flex-wrap: wrap 生效

flex-start：多行靠交叉轴起点对齐。
flex-end：多行靠交叉轴终点对齐。
center：多行在交叉轴上居中对齐。
stretch：多行拉伸以填满交叉轴剩余空间。
space-between：多行两端对齐，间隔均匀分布。
space-around：多行周围间隔均匀分布。
space-evenly：多行之间及两端间隔完全相等。

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

在这里插入图片描述

项目上添加 flex 特性

放大 flex-grow

定义项目在容器有剩余空间时的放大比例，默认值为 0（不放大）。
给容器添加 min-width: 0 或 overflow: auto;可防止内容撑开容器。

.item {
  flex-grow: 1; /* 项目将按比例分配剩余空间 */
}

在这里插入图片描述

缩小 flex-shrink

定义项目在容器空间不足时的缩小比例，默认值为 1（按比例缩小）。

.item {
  flex-shrink: 0; /* 项目不缩小，可能导致溢出 */
}

在这里插入图片描述

初始大小 flex-basis

定义项目在分配剩余空间之前的初始大小，可以是长度值（如 200px）或百分比（如 50%），默认值为 auto（根据内容大小自动调整）。

.item {
  flex-basis: 100px; /* 项目初始宽度为 100px */
}

调整项目交叉轴的对齐方式 align-self

优先级高于容器的 align-items

.item {
  align-self: flex-end; /* 该项目在交叉轴上靠终点对齐 */
}

在这里插入图片描述

排序 order

项目的排列顺序。数值越小，排列越靠前，默认为0

在这里插入图片描述

简写

flex

flex 是 flex-grow、flex-shrink 和 flex-basis 的简写属性，常用写法：

flex: 1：等同于 flex: 1 1 0%，表示项目放大、缩小且初始大小为内容大小。
flex: 0 1 auto：表示项目不放大、按比例缩小且初始大小为内容大小。

.item {
  flex: 1;
}

flex: initial、flex:0、flex:1、flex:none、flex:auto的区别和使用场景
https://blog.csdn.net/weixin_41192489/article/details/120846362

flex-flow

flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

深度详解

剩余空间分配规则

flex-grow，flex-shrink和flex-basis
https://blog.csdn.net/weixin_41192489/article/details/120842902

实战范例

绘制骰子

https://blog.csdn.net/weixin_41192489/article/details/136398234

水平居中导航栏

<nav class="flex justify-center space-x-4">
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#">关于我们</a>
</nav>

nav {
  display: flex;
  justify-content: center;
  gap: 16px;
}

垂直居中卡片

<div class="flex items-center justify-center h-screen bg-gray-200">
  <div class="bg-white p-8 rounded shadow-md">
    <h2 class="text-2xl font-bold mb-4">欢迎使用</h2>
    <p>这是一个垂直居中的卡片。</p>
  </div>
</div>

body {
  margin: 0;
}

响应式列布局

<div class="flex flex-wrap">
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">内容1</div>
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">内容2</div>
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">内容3</div>
</div>

@media (min-width: 768px) {
  .w-1/2 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 1024px) {
  .w-1/3 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
}

实战技巧

使用margin:auto智能分配剩余空间
https://blog.csdn.net/weixin_41192489/article/details/120834852
flex-grow 自适配宽度避免内容超出挤压两侧的最佳实践
https://blog.csdn.net/weixin_41192489/article/details/139058300

注意事项

Flex 与 float、clear 冲突：Flex 项目自动脱离文档流，float 和 clear 属性对其无效。
浏览器兼容性：主流浏览器（Chrome、Firefox、Safari、Edge）均支持 Flex 布局，但需注意对旧版浏览器（如 IE10 及以下）添加前缀（-webkit-, -ms-）。