第4章：开启Flex布局

开启Flex布局是使用Flex布局的第一步。在本节中，我们将学习如何开启Flex布局，以及flex与inline-flex的区别。

4.1 容器开启Flex布局的语法

要开启Flex布局，只需要在容器元素上设置 display 属性为 flex 或 inline-flex：

css

/* 块级Flex容器 */
.container {
  display: flex;
}

/* 行内Flex容器 */
.inline-container {
  display: inline-flex;
}

4.2 flex与inline-flex的区别

属性值	容器类型	行为
`flex`	块级Flex容器	容器会占据整个父元素的宽度，类似于块级元素
`inline-flex`	行内Flex容器	容器的宽度由内容决定，类似于行内元素

示例对比

html

<!DOCTYPE html>
<html>
<head>
  <title>flex vs inline-flex</title>
  <style>
    .container {
      display: flex;
      background-color: #f0f0f0;
      padding: 10px;
      margin: 10px 0;
    }
    
    .inline-container {
      display: inline-flex;
      background-color: #e0e0e0;
      padding: 10px;
      margin: 10px;
    }
    
    .item {
      width: 60px;
      height: 60px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px;
      border-radius: 4px;
    }
    
    .text {
      margin: 10px;
    }
  </style>
</head>
<body>
  <h1>flex vs inline-flex</h1>
  
  <h2>display: flex（块级容器）</h2>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <p class="text">块级Flex容器会占据整个宽度，即使内容不多</p>
  
  <h2>display: inline-flex（行内容器）</h2>
  <div class="inline-container">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>
  <div class="inline-container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
  </div>
  <p class="text">行内Flex容器的宽度由内容决定，可以和其他元素在同一行显示</p>
</body>
</html>

4.3 开启Flex布局后，项目的默认行为

当容器开启Flex布局后，项目会有以下默认行为：

项目在主轴上从左到右排列（flex-direction: row）
项目不换行（flex-wrap: nowrap）
项目在主轴上顶部对齐（justify-content: flex-start）
项目在交叉轴上拉伸对齐（align-items: stretch）
项目的宽度由内容决定（flex-basis: auto）
项目不会放大（flex-grow: 0）
项目会缩小（flex-shrink: 1）
项目的顺序由HTML结构决定（order: 0）

4.4 实操案例：开启Flex布局，观察项目默认排列效果

代码示例

html

<!DOCTYPE html>
<html>
<head>
  <title>Flex布局默认行为</title>
  <style>
    .container {
      display: flex; /* 开启Flex布局 */
      height: 200px;
      background-color: #f0f0f0;
      border: 1px solid #ddd;
      padding: 10px;
    }
    
    .item {
      background-color: #3498db;
      color: white;
      padding: 20px;
      margin: 5px;
      border-radius: 4px;
    }
    
    .item1 {
      width: 100px;
    }
    
    .item2 {
      width: 150px;
    }
    
    .item3 {
      width: 80px;
    }
  </style>
</head>
<body>
  <h1>Flex布局默认行为</h1>
  <div class="container">
    <div class="item item1">项目1</div>
    <div class="item item2">项目2</div>
    <div class="item item3">项目3</div>
  </div>
  <p><strong>默认行为：</strong></p>
  <ul>
    <li>项目水平排列（flex-direction: row）</li>
    <li>项目不换行（flex-wrap: nowrap）</li>
    <li>项目从左到右对齐（justify-content: flex-start）</li>
    <li>项目拉伸至容器高度（align-items: stretch）</li>
  </ul>
</body>
</html>

效果说明

三个项目水平排列
项目高度自动拉伸至容器高度
项目之间有默认的间距（来自margin）
容器宽度由内容决定

4.5 常见错误：开启Flex布局后样式不生效的原因排查

常见原因

选择器错误：CSS选择器没有正确选中容器元素
属性拼写错误：如 display: flexs（多了一个s）
浏览器兼容性：在一些旧浏览器中需要添加前缀
样式优先级：其他样式覆盖了Flex布局相关属性
HTML结构错误：项目不是容器的直接子元素

排查步骤

检查选择器：确保CSS选择器正确选中了目标元素
检查属性拼写：确保 display: flex 拼写正确
检查浏览器开发者工具：在Elements面板中查看元素的计算样式
检查HTML结构：确保项目是容器的直接子元素
简化代码：创建一个最小可复现的例子，逐步排查

浏览器兼容性

对于需要支持旧浏览器的项目，可以使用以下前缀：

css

.container {
  display: -webkit-box; /* Safari */
  display: -ms-flexbox; /* IE 10 */
  display: flex;
}

不过，现代浏览器已经广泛支持标准的Flex布局语法，通常不需要添加前缀。

实操练习

创建一个块级Flex容器，包含3个项目
创建一个行内Flex容器，包含2个项目
观察并对比两者的区别
尝试修改容器的高度，观察项目的拉伸效果

通过本节的学习，你已经掌握了如何开启Flex布局以及相关的注意事项。在接下来的章节中，我们将学习Flex布局的各种属性，进一步控制布局效果。

第4章：开启Flex布局 ​

4.1 容器开启Flex布局的语法 ​

4.2 flex与inline-flex的区别 ​

示例对比 ​

4.3 开启Flex布局后，项目的默认行为 ​

4.4 实操案例：开启Flex布局，观察项目默认排列效果 ​

代码示例 ​

效果说明 ​

4.5 常见错误：开启Flex布局后样式不生效的原因排查 ​

常见原因 ​

排查步骤 ​

浏览器兼容性 ​

实操练习 ​