Flex 布局的基本概念

学习

Flex 布局的基本概念

2026-02-23/0/ 编辑

Flex 布局的基本概念

一、什么是 Flex 布局

1.1 基本定义

  • Flex 是 Flexible Box 的缩写，意为"弹性盒子"
  • Flex 布局是一种一维的布局模型，它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力
  • Flexbox 是一种一维的布局，因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列

1.2 为什么使用 Flex 布局

传统布局的问题：

  • 浮动+定位布局兼容性好，但布局繁琐
  • 在移动端应用起来相对麻烦

Flex 布局的优势：

  • 操作方便，布局极为简单
  • 非常适合移动端布局
  • 现在 PC 端和移动端都应用很广泛

二、Flex 容器和 Flex 项目

2.1 基本概念

  • 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"
  • Flex 容器的所有直接子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"
  • 通过给元素添加 display:flex 或 display:inline-flex 来指定元素为 Flex 布局容器

2.2 display 属性值

属性值说明
display:flex;弹性布局，元素自身以块级元素显示
display:inline-flex;弹性布局，元素自身以行内块元素呈现

2.3 基本示例

<style>
  .flex-container {
    display: flex;        /* 弹性布局，元素自身以块级元素显示 */
    display: inline-flex; /* 弹性布局，元素自身以行内块元素呈现 */
    background-color: skyblue;
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: pink;
  }
</style>

<div class="flex-container">
  <div class="flex-item">Flex项目</div>
  <div class="flex-item">Flex项目</div>
  <div class="flex-item">Flex项目</div>
  <div class="flex-item">Flex项目</div>
</div>

2.4 注意事项

  • 任何一个元素都可以指定为 Flex 布局
  • Flex 布局项目（子元素）的 float、clear 和 vertical-align 属性将失效

三、主轴和交叉轴

3.1 基本概念

Flex 容器默认存在两根轴：

轴类型说明方向
主轴（main axis）水平方向默认从左到右
交叉轴（cross axis）垂直方向默认从上到下

3.2 相关术语

术语说明
main start主轴的开始位置（与边框的交叉点）
main end主轴的结束位置
cross start交叉轴的开始位置
cross end交叉轴的结束位置
main size单个 Flex 项目占据的主轴空间
cross sizeFlex 项目占据的交叉轴空间

3.3 默认行为

  • Flex 项目默认沿主轴排列
  • 默认从左往右沿水平排列

四、Flex 项目的默认表现形式

当 flex 容器和 flex 项目没有添加任何 Flex 容器和 Flex 项目相关属性时，flex 项目默认的表现形式如下：

4.1 默认表现

特性说明
排列方式子元素（项目）排列为一行（flex-direction 属性的初始值是 row）
排列起点子元素（项目）从主轴的起始线开始排列
主维度拉伸子元素（项目）不会在主维度方向拉伸（放的下，不会拉伸），但放不下，会缩小
交叉轴拉伸子元素（项目）没有设置 height 时，元素被拉伸来填充交叉轴大小（单行时项目的高度等于容器高），设置了高，则按设置高显示
宽度设置如果 flex 容器能放下所有子元素时，子元素设置了 width，则宽为 width 大小，没有设置，则宽为元素内容宽（因为 flex-basis 默认值为 auto）
换行子项默认放不下时，不会换行（因为 flex-wrap 属性默认为值 nowrap）

4.2 代码演示

<style>
  .flex-container {
    padding: 10px;
    /* 容器宽为 200px，子项放不下时，子项宽会缩小 */
    width: 200px; /* 将宽度去掉或修改成 1000px 后，看不同效果 */
    height: 200px;
    background-color: skyblue;
    display: flex;
  }
  .flex-item {
    /* 未设置高度 */
    width: 100px;
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    background-color: tomato;
    margin: 5px;
  }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>

4.3 不同容器宽度的效果

  1. 容器宽度不设置（与浏览器一样大时）

    • 子项可以完全放下

  2. 容器宽度为 200px（所有子项宽加起来 400px，大于了容器宽）

    • 元素并没换行，而是缩小宽度，自动压缩到容器中显示

  3. 容器宽度为 50px

    • 子项缩小到只有内容宽时，容器还是放不下，则会溢出

4.4 高度说明

.flex-item 没有设置高度时，其高度会被拉伸与父容器 .flex-container 的高一样大小。

猜你喜欢