从零开始学习 Flex 弹性布局

发布时间 2025-07-29 11:51:47

阅读量加载中...

什么是 Flexbox？

Flexbox（弹性盒子布局）是 CSS3 提供的一种现代布局方式，它让我们能够更轻松地创建响应式网页布局，而不需要复杂的浮动或定位技巧。

MDN flex 文档 | Flexbox Froggy - 游戏化学习 | CSS-Tricks Flexbox Guide - 详细指南

基础概念

Flexbox 布局有两个主要组成部分：

Flex 容器（父元素）：通过设置 display: flex 来创建
Flex 项目（子元素）：容器内的直接子元素

Flex 布局示例

此演示仅在桌面端浏览器中可用

     html
    
  
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        background-color: #f0f0f0;
        padding: 10px;
      }

      .item {
        background-color: #4caf50;
        color: white;
        padding: 20px;
        margin: 5px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

理解主轴和交叉轴

Flexbox 布局基于两个轴：

主轴： 默认是水平方向（从左到右）
交叉轴： 默认是垂直方向（从上到下）

常用 Flex 容器属性

1. 改变方向

     css
    
  
.container {
  flex-direction: row; /* 默认值，水平排列 */
  flex-direction: column; /* 垂直排列 */
  flex-direction: row-reverse; /* 水平反向排列 */
  flex-direction: column-reverse; /* 垂直反向排列 */
}

2. 换行控制

     css
    
  
.container {
  flex-wrap: nowrap; /* 默认值，不换行 */
  flex-wrap: wrap; /* 换行 */
  flex-wrap: wrap-reverse; /* 反向换行 */
}

3. 主轴对齐

     css
    
  
.container {
  justify-content: flex-start; /* 默认值，左对齐 */
  justify-content: flex-end; /* 右对齐 */
  justify-content: center; /* 居中对齐 */
  justify-content: space-between; /* 两端对齐 */
  justify-content: space-around; /* 均匀分布 */
  justify-content: space-evenly; /* 完全均匀分布 */
}

4. 交叉轴对齐

     css
    
  
.container {
  align-items: stretch; /* 默认值，拉伸填满 */
  align-items: flex-start; /* 顶部对齐 */
  align-items: flex-end; /* 底部对齐 */
  align-items: center; /* 居中对齐 */
  align-items: baseline; /* 基线对齐 */
}

常用 Flex 项目属性

1. 调整项目顺序

     css
    
  
.item:nth-child(1) {
  order: 2; /* 第二个显示 */
}
.item:nth-child(2) {
  order: 1; /* 第一个显示 */
}

2. 控制项目伸缩

flex-grow: 1 元素会按比例扩展以占用容器中的剩余空间（如果有的话）
flex-shrink: 1 元素会按比例收缩以适应容器（当空间不足时）。
flex-basis: auto 元素的初始大小由自身内容或显式设置的 width/height 决定（而非强制重置为 0）。

     css
    
  
.item {
  flex-grow: 1; /* 允许项目放大 */
  flex-shrink: 1; /* 允许项目缩小 */
  flex-basis: 100px; /* 项目的基础大小 */

  /* 简写形式 */
  flex: 1 1 100px; /* 等同于上面三行 */
}

简写形式

flex: auto 等价于：

     css
    
  
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

两个元素平分剩余空间，但初始大小会优先考虑内容宽度（auto 的作用），再按比例调整。

何时使用

当需要元素既能根据内容自适应初始大小，又能动态伸缩填充剩余空间时，flex: auto 是一个实用的选择。

对比其他常见值

flex: initial → 0 1 auto（不扩展，可收缩，基于内容大小）
flex: none → 0 0 auto（固定大小，不扩展也不收缩）
flex: 1 → 1 1 0%（按比例分配空间，初始大小为 0）

3. 单独对齐项目

     css
    
  
.item:nth-child(2) {
  align-self: center; /* 单独居中对齐 */
}

实战练习：创建一个简单的导航栏

此演示仅在桌面端浏览器中可用

     html
    
  
<!DOCTYPE html>
<html>
  <head>
    <style>
      .navbar {
        display: flex;
        background-color: #333;
        padding: 10px;
      }

      .nav-item {
        color: white;
        padding: 10px 20px;
        text-decoration: none;
      }

      .nav-item:hover {
        background-color: #4caf50;
      }

      .nav-item.active {
        background-color: #4caf50;
        font-weight: bold;
      }

      .search {
        margin-left: auto; /* 将搜索框推到最右边 */
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="navbar">
      <a href="#" class="nav-item active">首页</a>
      <a href="#" class="nav-item">新闻</a>
      <a href="#" class="nav-item">关于</a>
      <a href="#" class="nav-item">联系</a>
      <input type="text" class="search" placeholder="搜索..." />
    </div>
  </body>
</html>

小测验

如何让 flex 项目垂直排列？

答案：在容器上设置 flex-direction: column
如何让 flex 项目在容器中居中对齐？

答案：在容器上设置 justify-content: center 和 align-items: center
如何让某个 flex 项目单独对齐？

答案：在该项目上设置 align-self 属性

#Flex #Layout #CSS基础