前端知识站

简体中文

English

简体中文

English

外观

2025-12-01
4617
20.7m

Flex 项目属性：精准控制每个元素的行为 ​

想象一个自助餐厅，桌上摆着不同大小的盘子。当食物送上来时，大盘子可以盛更多,小盘子盛得少一些；当食物不够时，每个盘子都会少盛一点。有些特殊的盘子（比如主厨推荐）可能会优先获得更多；有些盘子可能需要靠边站，给其他盘子腾地方。

在上一章中，我们学习了 Flex 容器的属性，它们就像是餐厅经理，决定整体的布局规则。而这一章要学习的 Flex 项目属性，就像是给每个盘子的特殊指示——即使在同一个餐厅里，每个盘子也可以有自己的个性。

Flex-Grow：扩展能力 ​

flex-grow 定义了当容器有剩余空间时，项目扩展的能力。它的值是一个数字，表示项目相对于其他项目的扩展比例。

基本概念 ​

默认情况下，flex-grow 的值是 0，意味着即使容器有剩余空间，项目也不会自动扩展。

css
.item {
  flex-grow: 0; /* 默认值，不扩展 */
}

让我们看一个实际例子来理解这个属性：

html
<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>
css
.container {
  display: flex;
  width: 800px;
  background-color: #f5f5f5;
  padding: 20px;
}

.item {
  width: 150px; /* 每个项目初始宽度 150px */
  padding: 20px;
  background-color: #2196f3;
  color: white;
  text-align: center;
  margin: 5px;
}

在这个例子中，三个项目的总宽度是 450px（不包括 padding 和 margin），但容器宽度是 800px，剩余 350px 的空间没有被利用。如果我们设置 flex-grow: 1：

css
.item {
  width: 150px;
  flex-grow: 1; /* 所有项目平均分配剩余空间 */
}

现在，这 350px 的剩余空间会被三个项目平均分配，每个项目额外获得约 117px，最终每个项目的实际宽度约为 267px。

不同的扩展比例 ​

flex-grow 真正强大的地方在于可以设置不同的比例：

css
.item-1 {
  flex-grow: 1;
}

.item-2 {
  flex-grow: 2; /* 获得两份空间 */
}

.item-3 {
  flex-grow: 1;
}

现在让我们计算每个项目的实际宽度。假设容器宽度是 800px，三个项目的初始宽度都是 150px，去掉 padding 和 margin 后，剩余空间是 350px。

这 350px 会按照 1:2:1 的比例分配：

  • 总份数：1 + 2 + 1 = 4
  • 每份：350px ÷ 4 = 87.5px
  • item-1：150px + 87.5px = 237.5px
  • item-2：150px + 175px = 325px（获得 2 份）
  • item-3：150px + 87.5px = 237.5px

实际应用场景 ​

flex-grow 在很多场景中都非常有用。让我们看一个经典的导航栏布局：

html
<nav class="navbar">
  <div class="logo">TechCorp</div>
  <div class="search-bar">
    <input type="text" placeholder="Search..." />
    <button>Search</button>
  </div>
  <div class="user-menu">
    <button>Profile</button>
    <button>Logout</button>
  </div>
</nav>
css
.navbar {
  display: flex;
  gap: 20px;
  padding: 15px 30px;
  background-color: #333;
  align-items: center;
}

.logo {
  flex-grow: 0; /* Logo 保持固定大小 */
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.search-bar {
  flex-grow: 1; /* 搜索栏占据所有剩余空间 */
  display: flex;
  gap: 10px;
}

.search-bar input {
  flex-grow: 1; /* 输入框填充搜索栏 */
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
}

.search-bar button {
  padding: 8px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.user-menu {
  flex-grow: 0; /* 用户菜单保持固定 */
  display: flex;
  gap: 10px;
}

.user-menu button {
  padding: 8px 16px;
  background-color: transparent;
  color: white;
  border: 1px solid white;
  border-radius: 4px;
  cursor: pointer;
}

在这个布局中，Logo 和用户菜单保持固定大小，而搜索栏会自动扩展以填充所有剩余空间。无论屏幕多宽，布局都会自动适应。

Flex-Shrink：收缩能力 ​

如果 flex-grow 是关于扩展，那么 flex-shrink 就是关于收缩。它定义了当容器空间不足时，项目收缩的能力。

基本概念 ​

flex-shrink 的默认值是 1，意味着当容器空间不足时，所有项目都会等比例缩小。

css
.item {
  flex-shrink: 1; /* 默认值，可以缩小 */
}

让我们看一个例子：

css
.container {
  display: flex;
  width: 400px; /* 容器宽度 */
}

.item {
  width: 200px; /* 每个项目宽度 200px */
  flex-shrink: 1;
}

如果有 3 个项目，它们的总宽度是 600px，但容器只有 400px，缺少 200px 的空间。在默认情况下（flex-shrink: 1），这 200px 会从三个项目中等比例扣除，每个项目收缩约 67px，最终宽度约为 133px。

防止收缩 ​

有时候，你不希望某个项目缩小，可以将 flex-shrink 设为 0：

css
.item-fixed {
  width: 200px;
  flex-shrink: 0; /* 不会收缩 */
}

.item-flexible {
  width: 200px;
  flex-shrink: 1; /* 可以收缩 */
}

现在，如果容器宽度是 500px，有两个项目各 200px：

  • .item-fixed 保持 200px
  • .item-flexible 收缩到 300px（500px - 200px）

不同的收缩比例 ​

和 flex-grow 一样，flex-shrink 也可以设置不同的收缩比例：

css
.item-1 {
  width: 200px;
  flex-shrink: 1;
}

.item-2 {
  width: 200px;
  flex-shrink: 2; /* 收缩更多 */
}

.item-3 {
  width: 200px;
  flex-shrink: 1;
}

如果容器宽度是 400px，三个项目总宽度 600px，需要收缩 200px。按照 1:2:1 的比例：

  • 总份数：1 + 2 + 1 = 4
  • 每份：200px ÷ 4 = 50px
  • item-1：200px - 50px = 150px
  • item-2：200px - 100px = 100px（收缩 2 份）
  • item-3：200px - 50px = 150px

实际应用：响应式表格 ​

flex-shrink 在创建响应式表格时特别有用：

html
<div class="table-row">
  <div class="cell cell-name">John Smith</div>
  <div class="cell cell-email">[email protected]</div>
  <div class="cell cell-role">Developer</div>
  <div class="cell cell-actions">
    <button>Edit</button>
    <button>Delete</button>
  </div>
</div>
css
.table-row {
  display: flex;
  gap: 15px;
  padding: 15px;
  background-color: white;
  border-bottom: 1px solid #eee;
}

.cell-name {
  flex: 1 1 200px; /* 可以扩展和收缩，基础 200px */
}

.cell-email {
  flex: 2 1 300px; /* 可以扩展和收缩更多 */
}

.cell-role {
  flex: 0 1 150px; /* 不扩展，可以收缩 */
}

.cell-actions {
  flex: 0 0 160px; /* 不扩展也不收缩，保持固定 */
}

在这个布局中：

  • 姓名列可以适当调整
  • 邮箱列是最灵活的，可以占据更多空间
  • 角色列可以收缩但不会扩展
  • 操作按钮列保持固定宽度

Flex-Basis：项目的基础尺寸 ​

flex-basis 定义了在分配剩余空间之前，项目占据的主轴空间。你可以把它理解为项目的"理想尺寸"。

基本概念 ​

flex-basis 的默认值是 auto，意味着项目的尺寸由其内容或明确设置的 width/height 决定。

css
.item {
  flex-basis: auto; /* 默认值 */
}

你可以给 flex-basis 设置具体的长度值：

css
.item {
  flex-basis: 200px; /* 基础尺寸是 200px */
}

flex-basis vs width ​

很多人会疑惑：flex-basis 和 width（在主轴为水平时）有什么区别？

简单来说：

  • width 是硬性尺寸，除非项目需要收缩（flex-shrink）或扩展（flex-grow）
  • flex-basis 是"理想尺寸"，是 Flexbox 计算的起点

让我们看一个对比：

css
/* 使用 width */
.item-width {
  width: 200px; /* 设置宽度 */
  flex-grow: 1; /* 可以扩展 */
}

/* 使用 flex-basis */
.item-basis {
  flex-basis: 200px; /* 设置基础尺寸 */
  flex-grow: 1; /* 可以扩展 */
}

在大多数情况下，这两种写法的效果是相同的。但有一个重要区别：flex-basis 优先级更高。

css
.item {
  width: 150px;
  flex-basis: 200px; /* flex-basis 会覆盖 width */
}

在这个例子中，项目的实际基础尺寸是 200px，而不是 150px。

特殊值：auto 和 content ​

flex-basis 有两个特殊值：

flex-basis: auto（默认值）

项目的尺寸由 width/height 属性决定。如果没有设置 width/height，则由内容决定。

css
.item {
  flex-basis: auto; /* 如果有 width，使用 width；否则使用内容宽度 */
  width: 200px; /* 基础尺寸将是 200px */
}

flex-basis: content

项目的尺寸完全由内容决定，忽略 width/height 属性。

css
.item {
  flex-basis: content; /* 完全由内容决定 */
  width: 200px; /* 这个值会被忽略 */
}

百分比值 ​

flex-basis 可以设置为百分比，相对于容器的主轴尺寸：

css
.container {
  display: flex;
  width: 1000px;
}

.item {
  flex-basis: 30%; /* 300px (1000px × 30%) */
}

这在创建比例布局时很有用：

html
<div class="layout">
  <aside class="sidebar">Sidebar</aside>
  <main class="main-content">Main Content</main>
</div>
css
.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 250px; /* 固定 250px 宽度 */
  background-color: #f5f5f5;
  padding: 20px;
}

.main-content {
  flex: 1 1 auto; /* 占据剩余空间 */
  padding: 20px;
}

Flex 简写：综合控制 ​

flex 是 flex-grow、flex-shrink 和 flex-basis 的简写属性。这是 Flexbox 中最常用的属性之一。

基本语法 ​

css
.item {
  flex: <flex-grow> <flex-shrink> <flex-basis>;
}

例如：

css
.item {
  flex: 1 1 200px;
  /* 等同于：
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 200px;
  */
}

单值语法 ​

当只写一个值时，含义会根据值的类型而变化：

数字值：设置 flex-grow

css
.item {
  flex: 1;
  /* 等同于：
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 0%;
  */
}

注意，这里 flex-basis 变成了 0%，而不是默认的 auto。这是一个重要的区别！

长度值：设置 flex-basis

css
.item {
  flex: 200px;
  /* 等同于：
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 200px;
  */
}

双值语法 ​

数字 + 数字：flex-grow 和 flex-shrink

css
.item {
  flex: 2 1;
  /* 等同于：
     flex-grow: 2;
     flex-shrink: 1;
     flex-basis: 0%;
  */
}

数字 + 长度：flex-grow 和 flex-basis

css
.item {
  flex: 1 200px;
  /* 等同于：
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 200px;
  */
}

常用的 flex 值 ​

在实际开发中，以下几个 flex 值最常用：

flex: 1

这是最常见的值，表示项目可以扩展和收缩，会平均分配空间。

css
.item {
  flex: 1;
  /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}

实际应用：

css
.equal-columns {
  display: flex;
}

.column {
  flex: 1; /* 所有列等宽 */
  padding: 20px;
}

flex: auto

项目可以扩展和收缩，基础尺寸由内容或 width 决定。

css
.item {
  flex: auto;
  /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
}

这个值适合内容主导的布局：

css
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  flex: auto; /* 标签大小由内容决定 */
  padding: 6px 12px;
  background-color: #e3f2fd;
  border-radius: 4px;
}

flex: none

项目不扩展也不收缩，保持固定大小。

css
.item {
  flex: none;
  /* flex-grow: 0, flex-shrink: 0, flex-basis: auto */
}

这相当于完全关闭 Flexbox 的弹性特性：

css
.fixed-sidebar {
  flex: none;
  width: 250px; /* 保持固定宽度 */
}

flex: 0 0 auto

和 flex: none 类似，但更明确。

css
.item {
  flex: 0 0 auto;
  /* 不扩展，不收缩，由内容或 width 决定大小 */
}

flex: 1 0 auto

项目可以扩展但不会收缩。

css
.item {
  flex: 1 0 auto;
  /* 可以扩展以填充空间，但不会缩小到自然尺寸以下 */
}

flex: 1 的深入理解 ​

flex: 1 是最容易被误解的值之一。让我们详细理解它的行为。

html
<div class="container">
  <div class="item">Short</div>
  <div class="item">A much longer text content</div>
  <div class="item">Medium</div>
</div>
css
.container {
  display: flex;
  width: 600px;
}

.item {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}

因为 flex-basis: 0%，所有项目从 0 开始计算。容器的 600px 会被平均分成 3 份，每个项目获得 200px。即使第二个项目的内容更长，它也会是 200px（内容可能会换行）。

如果我们使用 flex: auto：

css
.item {
  flex: auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
}

现在每个项目先根据内容确定基础尺寸（比如 60px、180px、80px），然后剩余的空间（600px - 320px = 280px）才会被平均分配。最终宽度可能是：

  • 第一个项目：60px + 93px = 153px
  • 第二个项目：180px + 93px = 273px
  • 第三个项目：80px + 93px = 173px

所以：

  • flex: 1 让所有项目严格等宽
  • flex: auto 让项目在考虑内容的基础上分配空间

Align-Self：个性化对齐 ​

align-self 允许单个项目有与其他项目不同的交叉轴对齐方式，可以覆盖容器的 align-items 设置。

基本用法 ​

align-self 的取值和 align-items 相同：

css
.item {
  align-self: auto; /* 默认值，使用容器的 align-items 值 */
}

其他可用值：

  • flex-start：交叉轴起点对齐
  • flex-end：交叉轴终点对齐
  • center：交叉轴居中对齐
  • baseline：基线对齐
  • stretch：拉伸填充容器

实际应用 ​

让我们看一个卡片布局的例子，其中有一张"特色"卡片需要特殊处理：

html
<div class="card-container">
  <div class="card">
    <h3>Standard Plan</h3>
    <p>Basic features</p>
    <div class="price">$9/month</div>
  </div>
  <div class="card featured">
    <div class="badge">Best Value</div>
    <h3>Pro Plan</h3>
    <p>All features included</p>
    <div class="price">$29/month</div>
  </div>
  <div class="card">
    <h3>Enterprise</h3>
    <p>Custom solutions</p>
    <div class="price">$99/month</div>
  </div>
</div>
css
.card-container {
  display: flex;
  align-items: flex-start; /* 默认所有卡片顶部对齐 */
  gap: 20px;
  padding: 40px;
}

.card {
  flex: 1;
  padding: 30px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.card.featured {
  align-self: stretch; /* 特色卡片拉伸填充整个高度 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: 2px solid #667eea;
  position: relative;
}

.badge {
  position: absolute;
  top: -15px;
  right: 20px;
  padding: 8px 16px;
  background-color: #ff9800;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
}

在这个例子中，普通卡片顶部对齐自然高度，而特色卡片会拉伸到与最高的卡片相同的高度，突出显示。

垂直布局中的 align-self ​

当主轴是垂直方向时，align-self 控制水平对齐：

html
<div class="vertical-container">
  <div class="item item-start">Left</div>
  <div class="item item-center">Center</div>
  <div class="item item-end">Right</div>
</div>
css
.vertical-container {
  display: flex;
  flex-direction: column; /* 垂直主轴 */
  align-items: flex-start; /* 默认左对齐 */
  height: 400px;
  width: 500px;
  background-color: #f5f5f5;
  padding: 20px;
}

.item {
  padding: 15px 30px;
  background-color: #2196f3;
  color: white;
  margin: 10px 0;
}

.item-center {
  align-self: center; /* 这个项目居中 */
}

.item-end {
  align-self: flex-end; /* 这个项目右对齐 */
}

Order：重排项目顺序 ​

order 属性允许你改变项目的显示顺序，而不需要修改 HTML 结构。

基本概念 ​

默认情况下，所有项目的 order 值都是 0，它们按照 HTML 中的顺序排列。

css
.item {
  order: 0; /* 默认值 */
}

你可以设置正数或负数来改变顺序。数值越小，项目越靠前。

html
<div class="container">
  <div class="item item-1">First in HTML</div>
  <div class="item item-2">Second in HTML</div>
  <div class="item item-3">Third in HTML</div>
</div>
css
.item-1 {
  order: 3; /* 显示在最后 */
}

.item-2 {
  order: 1; /* 显示在中间 */
}

.item-3 {
  order: 2; /* 显示在第二位 */
}

现在的显示顺序是：item-2、item-3、item-1。

实际应用：响应式布局 ​

order 在响应式设计中特别有用，可以在不同屏幕尺寸下重排元素：

html
<div class="article">
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main Content</main>
  <div class="ads">Advertisements</div>
</div>
css
.article {
  display: flex;
  flex-direction: column;
}

/* 移动端：内容优先 */
.content {
  order: 1;
}

.sidebar {
  order: 2;
}

.ads {
  order: 3;
}

/* 桌面端：恢复正常顺序 */
@media (min-width: 768px) {
  .article {
    flex-direction: row;
  }

  .sidebar {
    order: 1;
    flex: 0 0 250px;
  }

  .content {
    order: 2;
    flex: 1;
  }

  .ads {
    order: 3;
    flex: 0 0 200px;
  }
}

在移动端，主要内容优先显示；在桌面端，侧边栏回到左侧。

注意事项 ​

使用 order 时需要注意几点：

  1. 可访问性问题：order 只改变视觉顺序，不改变 DOM 顺序。屏幕阅读器和键盘导航仍然按照 HTML 顺序。如果视觉顺序和 DOM 顺序差异太大，可能会困扰使用辅助技术的用户。

  2. 性能影响：过度使用 order 可能影响性能，因为浏览器需要重新计算布局。

  3. 维护难度：如果大量使用 order，代码的可读性会降低，因为视觉顺序和 HTML 顺序不一致。

综合实例：复杂布局 ​

让我们通过一个复杂的实例来综合运用这些属性：

html
<div class="dashboard">
  <header class="header">
    <div class="logo">Dashboard</div>
    <div class="search">
      <input type="text" placeholder="Search..." />
    </div>
    <div class="user-info">
      <img src="avatar.jpg" alt="User" />
      <span>John Smith</span>
    </div>
  </header>

  <div class="main-layout">
    <nav class="sidebar">
      <a href="#">Home</a>
      <a href="#">Projects</a>
      <a href="#">Team</a>
      <a href="#">Settings</a>
    </nav>

    <main class="content">
      <div class="widget-grid">
        <div class="widget widget-large">
          <h3>Revenue</h3>
          <div class="chart">Chart Placeholder</div>
        </div>
        <div class="widget">
          <h3>Users</h3>
          <div class="stat">1,234</div>
        </div>
        <div class="widget">
          <h3>Orders</h3>
          <div class="stat">567</div>
        </div>
        <div class="widget widget-wide">
          <h3>Recent Activity</h3>
          <ul class="activity-list">
            <li>User registered</li>
            <li>Order placed</li>
            <li>Payment received</li>
          </ul>
        </div>
      </div>
    </main>

    <aside class="notifications">
      <h3>Notifications</h3>
      <div class="notification">New message</div>
      <div class="notification">Task completed</div>
    </aside>
  </div>
</div>
css
/* 整体布局 */
.dashboard {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 顶部导航栏 */
.header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 30px;
  background-color: #2c3e50;
  color: white;
}

.logo {
  flex: 0 0 auto;
  font-size: 24px;
  font-weight: bold;
}

.search {
  flex: 1 1 auto; /* 搜索框占据剩余空间 */
}

.search input {
  width: 100%;
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
}

.user-info {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* 主要布局区域 */
.main-layout {
  display: flex;
  flex: 1; /* 占据剩余高度 */
}

.sidebar {
  flex: 0 0 200px; /* 固定宽度侧边栏 */
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px;
  background-color: #34495e;
}

.sidebar a {
  padding: 12px 15px;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.sidebar a:hover {
  background-color: #2c3e50;
}

.content {
  flex: 1 1 auto; /* 占据剩余空间 */
  padding: 30px;
  background-color: #ecf0f1;
}

.notifications {
  flex: 0 0 250px; /* 固定宽度通知栏 */
  padding: 20px;
  background-color: #f5f5f5;
  border-left: 1px solid #ddd;
  order: 3; /* 确保在最右边 */
}

/* 小部件网格 */
.widget-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.widget {
  flex: 1 1 calc(33.333% - 20px); /* 每行 3 个 */
  min-width: 250px;
  padding: 25px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.widget-large {
  flex: 2 1 calc(66.666% - 20px); /* 占据 2/3 宽度 */
}

.widget-wide {
  flex: 1 1 100%; /* 占据整行 */
}

.stat {
  font-size: 36px;
  font-weight: bold;
  color: #2196f3;
  margin-top: 15px;
}

/* 响应式适配 */
@media (max-width: 1024px) {
  .notifications {
    flex: 0 0 200px; /* 缩小通知栏 */
  }

  .widget {
    flex: 1 1 calc(50% - 20px); /* 每行 2 个 */
  }
}

@media (max-width: 768px) {
  .main-layout {
    flex-direction: column;
  }

  .sidebar {
    flex: 0 0 auto;
    order: 1;
  }

  .content {
    order: 2;
  }

  .notifications {
    flex: 0 0 auto;
    order: 3;
  }

  .widget {
    flex: 1 1 100%; /* 每行 1 个 */
  }

  .widget-large,
  .widget-wide {
    flex: 1 1 100%;
  }
}

这个复杂的仪表板布局展示了：

  • 使用 flex-grow 和 flex-shrink 创建灵活的搜索栏
  • 使用 flex-basis 设置固定宽度的侧边栏和通知栏
  • 使用 order 在响应式布局中重排元素
  • 使用 flex 简写创建复杂的网格布局
  • 使用 align-items 实现垂直居中对齐

总结 ​

Flex 项目属性让你可以精细控制每个元素的行为，是 Flexbox 真正强大的地方。

核心属性回顾：

  • flex-grow：定义扩展能力，数值越大获得的剩余空间越多
  • flex-shrink：定义收缩能力，设为 0 可以防止收缩
  • flex-basis：定义基础尺寸，是空间计算的起点
  • flex：三个属性的简写，最常用的是 flex: 1 和 flex: auto
  • align-self：覆盖容器的 align-items，实现个性化对齐
  • order：改变视觉顺序，不改变 DOM 顺序

常用 flex 值：

  • flex: 1：完全弹性，所有项目等宽（1 1 0%）
  • flex: auto：弹性，但考虑内容尺寸（1 1 auto）
  • flex: none：完全固定（0 0 auto）
  • flex: 0 0 200px：固定 200px 宽度

最佳实践：

  1. 优先使用 flex 简写，代码更简洁
  2. 理解 flex-basis 的作用，它影响空间分配
  3. 谨慎使用 order，注意可访问性问题
  4. 结合容器属性和项目属性，创建强大的布局
  5. 在响应式设计中，灵活运用 flex 值的变化

掌握了 Flex 项目属性，你已经具备了使用 Flexbox 创建各种复杂布局的能力。在下一节中，我们将学习如何将这些知识应用到实际项目中，解决常见的布局难题。