CSS Flexbox 全面解析

🕗 发布于 2024-10-08 12:46 css 前端 flex css3 布局

一、前言

Flex 布局是一种 CSS 布局模式，它主要用于弹性盒子布局。相比于传统的布局方式，它更加灵活，易于调整，也更加适应不同的设备和屏幕尺寸。它为Web开发者提供了创建响应式布局的新方式。

在这里插入图片描述

在介绍Flex布局之前，不得不提到它的前辈——浮动和定位。它们曾是布局的主力军，但随着响应式设计的兴起，它们的局限性也愈发明显。
Flex布局的出现，正是为了解决这些局限性，Flexbox通过引入容器（Container）、项目（Items） 以及 主轴（Main Axis） 与 交叉轴（Cross Axis） 的概念，简化了这一过程。它允许元素根据空间自动调整大小，同时保持对齐和顺序，即使在不确定宽度或高度的情况下也能实现理想的布局效果。
随着时间的发展，Flexbox的兼容性和稳定性得到了显著提升，如今已成为现代Web开发中布局设计的首选方案之一。无论是构建简单的响应式导航栏，还是复杂的网格系统，Flexbox都能提供强大的支持，使得前端开发者能够更加专注于创造美观且功能丰富的用户体验。

二、Flex简介

Flex全称为 “Flexible Box Layout”，即 “弹性盒布局”，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化。
Flexbox 的核心思想是将容器内的子元素视为可伸缩的弹性盒子，可以根据需要自动调整其大小和位置，以填充可用空间。通过简单的 CSS 属性设置，开发者可以轻松地控制子元素的排列顺序、对齐方式以及相对大小的比例关系，而不需要依赖复杂的浮动和定位技术。
通过给父容器添加flex属性就能够开启弹性布局。子容器可以单独设置自身的排列方式，若果两者同时设置，以子容器的设置为准。
作用：
- 基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
- Flex布局非常适合结构化布局

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。当布局涉及到不定宽度，分布对⻬的场景时，我们可以优先考虑弹性盒布局。

声明定义

设置方式：父元素添加display: flex，子元素可以自动的挤压或拉伸
组成部分
- 容器：Flex 容器是应用了 display: flex; 或 display: inline-flex; 属性的元素，也叫父容器。这些属性告诉浏览器将容器内的子元素视为 Flex 项目，从而启用 Flexbox 布局模型。Flex 容器创建了一个新的布局上下文，影响其中的子元素的布局方式。
- 项目：Flex 容器内的直接子元素被称为 Flex 项目，也就是子容器（item)。这些项目根据 Flexbox 的规则在容器内排列和布局。
- 主轴：沿其布置子容器的从 main-start 开始到 main-end ，请注意，它不一定是水平的；这取决于 flex-direction 属性， main size 是它可放置的宽度，是容器的宽或高，取决于 flex-direction。
- 交叉轴：垂直于主轴的轴称为交叉轴，它的方向取决于主轴方向，是主轴写满一行后另起一行的方向，从 cross-start 到 cross-end ， cross size 是它可放置的宽度，是容器的宽或高，取决于 flex-direction。

在这里插入图片描述
容器与项目

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item"> </div>
    <div class="item">
      <p class="sub-item"> </p>
    </div>
    <div class="item"> </div>
  </div>
</body>

</html>

上面代码中，最外层的 div 就是容器，内层的三个 div 就是项目。
注意：项目只能是容器的顶层子元素（直属子元素），不包含项目的子元素，比如上面代码的 p 元素就不是项目。flex布局只对项目生效。

三、Flex使用-容器属性

3.1 主轴对齐方式 justify-content

在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。
修改主轴对齐方式属性：justify-content

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

示意：

3.2 侧轴对齐方式 align-items

修改侧轴对齐方式属性:
- align-items(添加到弹性容器)

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值，弹性盒子沿着主轴被拉伸至铺满容器
baseline	基线对齐

示意：

3.3 弹性盒子换行 flex-wrap

flex-wrap 属性指定 flex 元素单行显示还是多行显示。

属性值	作用
nowrap	元素被摆放到到一行，这可能导致 flex 容器溢出
wrap	flex 元素被打断到多个行中
wrap-reverse	和 wrap 的行为一样，但是 cross-start 和 cross-end 互换

在这里插入图片描述

3.4 主轴方向 flex-direction

flex-direction 属性指定了内部元素是如何在弹性容器中布局的，定义了主轴的方向。

属性值	作用
row	默认值，主轴为水平方向，起点在左端，从左向右排列
row-reverse	主轴为水平方向，起点在右端，从右向左排列
column	主轴为垂直方向，起点在上沿，从上往下排列
column-reverse	主轴为垂直方向，起点在下沿，从下往上排列

在这里插入图片描述

3.5 多行布局 align-content

align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

属性值	作用
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch	默认值，轴线占满整个交叉轴

在这里插入图片描述

3.6 间写 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
属性值处参考：flex-direction、flex-wrap。

3.7 间距 gap

gap 属性显式控制 flex 项之间的间距。它不仅适用于 flexbox，gap 也适用于网格和多列布局。
示意；

四、Flex使用-项目属性

4.1 排列顺序 order

order：定义子元素的排列顺序，决定了子元素在父容器中的显示顺序。数值越小，越靠前。默认值：0。
代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS order</title>
  <style>
    div.container {
      display: flex;
      flex-direction: row;
      background-color: purple;
    }

    div.box {
      width: 80px;
      height: 60px;
      text-align: center;
      background-color: orange;
      margin: 8px;
    }

    /* displays the box third in order */
    div.box1 {
      order: 3;
    }

    /* displays the box first in order */
    div.box2 {
      order: 1;
    }

    /* displays the box second in order */
    div.box3 {
      order: 2;
    }
  </style>
</head>

<body>
  <h2>Order Property</h2>
  <div class="container">
    <div class="box box1">1 <br />order: 3;</div>
    <div class="box box2">2 <br />order: 1;</div>
    <div class="box box3">3 <br />order: 2;</div>
  </div>
</body>

</html>

示意：

4.2 放大比例 flex-grow

flex-grow：指定 Flex 项目在空间分配时的放大比例。
代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS order</title>
  <style>
    /* styles for both containers */
    div.container {
      display: flex;
      flex-direction: row;
      background-color: purple;
    }

    /* styles for flex items of both containers */
    div.box {
      width: 80px;
      height: 60px;
      text-align: center;
      background-color: orange;
      margin: 8px;
    }

    /* styles for second container  */
    div.container2 div.box {
      flex-grow: 1;
    }

    div.container3 div.box:nth-child(odd) {
      flex-grow: 1;
    }
  </style>
</head>

<body>
  <h2>flex-grow: 0 (default value)</h2>

  <!-- container without flex-grow -->
  <div class="container container1">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>

  <h2>flex-grow: 1</h2>

  <!-- container with flex-grow -->
  <div class="container container2">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>

  <h2>some div flex-grow: 1</h2>

  <!-- container with flex-grow -->
  <div class="container container3">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
</body>

</html>

示意：

在这里插入图片描述

4.3 缩小比例 flex-shrink

flex-shrink：定义了项目的缩小比例，默认为 1 ，即如果空间不足，该项目将缩小。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS order</title>
  <style>
    /* styles for flex container */
    div.container {
      display: flex;
      flex-direction: row;
      background-color: purple;
    }

    /* style for flex items */
    div.box {
      width: 200px;
      height: 60px;
      text-align: center;
      background-color: orange;
      margin: 8px;
    }

    /* styles the third flex item of the second container */
    div.container2 div.box3 {
      flex-shrink: 2;
    }
  </style>
</head>

<body>
  <h2>flex-shrink: 1 (default value) for all flex items</h2>
  <div class="container container1">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box6">6</div>
  </div>

  <h2>flex-shrink: 2 on the third item</h2>
  <div class="container container2">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box6">6</div>
  </div>
</body>

</html>

示意：

4.4 初始大小 flex-basis

flex-basis：定义 Flex 项目在主轴上的初始大小。
代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS order</title>
  <style>
    /* styles for flex container */
    div.container {
      display: flex;
      flex-direction: row;
      background-color: purple;
    }

    /* style for flex items */
    div.box {
      width: 40px;
      height: 40px;
      text-align: center;
      background-color: orange;
      margin: 8px;
    }

    /* styles the fourth flex item of the second container */
    div.container2 div.box4 {
      flex-basis: 200px;
    }
  </style>
</head>

<body>
  <h2>flex-basis: auto (default value for all flex items)</h2>
  <div class="container container1">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
  </div>

  <h2>flex-basis: 200px on the fourth item</h2>
  <div class="container container2">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
  </div>
</body>

</html>

示意：

4.5 简写 flex

flex：flex-grow, flex-shrink, 和 flex-basis 的缩写属性。定义子元素分配剩余空间，用flex来表示占多少份数。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS order</title>
  <style>
    /* styles for flex container */
    div.container {
      display: flex;
      flex-direction: row;
      background-color: purple;
    }

    /* style for flex items */
    div.box {
      /*flex-grow, flex-shrink, flex-basis */
      flex: 1;
      height: 40px;
      text-align: center;
      background-color: orange;
      margin: 8px;
    }
  </style>
</head>

<body>
  <h2>flex: 1 (flex-grow:1, flex-shrink:1, flex-basis:0)</h2>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
</body>

</html>

示意：

4.6 交叉轴对齐 align-self

align-self：覆盖父容器的 align-items 属性，单独控制某个 Flex 项目在交叉轴上的对齐方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS order</title>
  <style>
    /* styles for flex container */
    div.container {
      height: 180px;
      display: flex;
      flex-direction: row;
      background-color: purple;
    }

    /* style for flex items */
    div.box {
      width: 80px;
      text-align: center;
      background-color: orange;
      margin: 8px;
    }

    div.box1 {
      align-self: flex-start;
    }

    div.box2 {
      align-self: center;
    }

    div.box3 {
      align-self: flex-end;
    }

    div.box4 {
      align-self: stretch;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box box1">1<br />flex-start</div>
    <div class="box box2">2 <br />center</div>
    <div class="box box3">3 <br />flex-end</div>
    <div class="box box4">4 <br />stretch</div>
  </div>
</body>

</html>

示意：

五、总结

5.1 应用举例

Flexbox 是一个非常强大的 CSS 布局模型，广泛应用于各种场景。以下是五个常见的 Flexbox 使用场景：

水平垂直居中
Flexbox 使得在容器中同时实现水平和垂直居中非常简单。

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

场景：需要将一个元素（如登录表单、按钮等）在页面或父容器内居中显示时，非常实用。

响应式导航栏
Flexbox 可以轻松创建自适应的导航栏，支持横向排列的菜单项，并在屏幕尺寸较小时进行调整。

.nav {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
}

.nav-item {
    padding: 10px 20px;
}

场景：用于构建支持多种屏幕尺寸的导航栏，导航项在行内排列，并且能灵活调整对齐方式。

等宽/等高布局
使用 Flexbox，可以轻松实现子元素的等宽或等高布局，特别是在不知道子元素具体内容高度的情况下。

.container {
    display: flex;
}

.child {
    flex: 1;
    padding: 20px;
    background-color: lightgrey;
}

场景：例如，创建三个等宽的列布局，适用于内容动态变化的面板、卡片布局等场景。

顺序控制
Flexbox 可以改变元素在 HTML 中的显示顺序，而无需改变其在文档中的实际顺序。

.container {
    display: flex;
}

.item:nth-child(1) {
    order: 2;
}

.item:nth-child(2) {
    order: 1;
}

场景：在响应式设计中，根据不同屏幕尺寸调整元素的显示顺序，如在移动端将侧边栏内容放到主内容之下。

自动填充空白空间
Flexbox 可以让元素在父容器中自动填充剩余空间，常用于按钮组、卡片布局等场景。

.container {
    display: flex;
    gap: 10px;
}

.button {
    flex: 1;
    padding: 10px;
    text-align: center;
    background-color: blue;
    color: white;
}

场景：创建自适应宽度的按钮组，或者在父容器中自动分配剩余空间给子元素。

这些场景展示了 Flexbox 的强大和灵活性，它可以帮助开发者快速实现各种复杂的布局需求，同时确保布局在不同设备上都能良好显示。

5.2 总结

Flexbox（弹性盒子布局）是一种强大的 CSS 布局模型，具有许多优点，但也有一些不足。以下是 Flexbox 的主要优点和不足：

优点

简单易用：
- Flexbox 的语法简单，理解起来相对容易，尤其在处理一维布局时（即行或列）。开发者可以快速实现复杂的布局需求，如水平垂直居中、等宽/等高布局等。
动态调整布局：
- Flexbox 能够根据容器的大小动态调整子元素的大小和位置。元素可以自动填充空白空间、缩小或扩展，这使得它特别适合用于响应式设计。
方向控制：
- Flexbox 支持轻松地控制布局方向，能够在行和列之间切换。此外，还可以通过 row-reverse 和 column-reverse 实现元素的倒序排列。
对齐和分布灵活：
- Flexbox 提供了 justify-content、align-items 和 align-self 等属性，使得水平和垂直方向上的对齐和分布控制变得非常灵活，可以轻松实现居中对齐、两端对齐、间距均匀分布等效果。
子元素的顺序控制：
- Flexbox 可以通过 order 属性调整子元素的显示顺序，而无需改变 HTML 结构。这在响应式设计中非常有用。

不足

一维布局限制：
- Flexbox 主要适用于一维布局，即处理一行或一列中的元素排列。当需要处理二维布局（同时控制行和列的布局）时，Flexbox 的能力有限，通常需要 Grid 布局来补充。
复杂布局时可能混乱：
- 对于非常复杂的布局（例如嵌套多个 Flex 容器），管理和理解 Flexbox 的行为可能变得复杂，尤其是在嵌套结构较深时。这时可能需要依赖更复杂的规则或组合其他布局方式（如 Grid）。
老旧浏览器支持有限：
- 尽管现代浏览器对 Flexbox 支持良好，但在一些老旧浏览器中，可能存在兼容性问题，需要使用前缀或降级方案来处理。
性能问题：
- 在处理大量复杂布局时，Flexbox 的性能可能不如传统的浮动布局或 Grid 布局高效。特别是在需要频繁重新计算布局的场景中，可能会有性能开销。
代码可读性：
- 在某些情况下，为了实现特定效果，可能需要使用多个 Flexbox 属性组合，这可能导致代码可读性下降，尤其是当其他开发者需要维护时。

适用场景总结
Flexbox 非常适合用于需要一维布局、动态调整和响应式设计的场景，如导航栏、按钮组、卡片布局等。然而，对于更复杂的多维布局，或需要高度控制的布局，Grid 布局或其他布局方式可能更为合适。

Flex 布局是一种强大的 CSS 布局技术，用于创建灵活的、响应式的布局。通过简单的属性设置，可以实现元素的自动调整大小、对齐和分布，适应不同的屏幕尺寸和设备。核心概念包括弹性容器和弹性项目，通过控制主轴和交叉轴的方向、对齐方式以及弹性增长和收缩，实现各种布局需求。Flex 布局简化了布局代码，提高了开发效率，是构建现代网页布局的首选技术之一。

原文地址：https://blog.csdn.net/ASHIYI66/article/details/141306336

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：关于Qt音乐播放器进度条拖拽无用的问题解决方案
下一篇：C# 中继承的说明

Java 实现 Feed 流实时更新数据的设计与实现
在现代社交媒体、新闻推送等场景中，Feed 流（Feed Stream）作为一种常见的数据展示形式，已经成为了用户获取实时信息的主要方式之一。Feed 流可以动态地向用户展示所关注的内容，例如微博的动
阅读更多2024-10-08
鹏哥C语言62---第9次作业：函数递归练习
/-------------------------------------------------------------------------------------------第九次作业函
阅读更多2024-10-08
CSS 效果：实现动态展示双箭头
使用 CSS 实现了一个简单但精致的箭头样式，就是包含突出和内缩箭头的视觉效果。
阅读更多2024-10-08
Deformable Transformer论文笔记（2）
在编码器中，我们从 ResNet (He et al., 2016) 中阶段 C3 到 C5 的输出特征图中提取多尺度特征图 {xl}l=1->L-1 (L = 4)（各层特征最终再由 1 ×
阅读更多2024-10-08
26.删除有序数组中的重复项
思路:只要不和前面的数一样就可以移动指针，进行赋值。
阅读更多2024-10-08
Java对象的比较
2. 用户也可以选择使用比较器对象，如果用户插入自定义类型对象时，必须要提供一个比较器类，让该类实现Comparator接口并覆写compare方法。1. Comparble是默认的内部比较方式，如果
阅读更多2024-10-08
项目前置知识
简单介绍 bind 接口函数绑定，timerfd 系统的定时器，时间轮的设计，正则库解析HTTP请求行的简单使用，日志打印宏的设计，通用类型Any的设计
阅读更多2024-10-08
国庆出行消费热情高涨滴滴订单量同比上涨15%
北京、成都、西安、广州、海口等旅游城市的租车需求量位于前五位，而安徽宣城、内蒙古乌兰察布、宁夏吴忠三城增速最快，较中秋假期分别增长约308%、300%、260%。济南、成都、南宁、苏州、太原等热门线路
阅读更多2024-10-08
AI知识库如何提升服装电商的运营效率
探讨AI知识库在服装电商中的应用，提升管理效率与用户体验。
阅读更多2024-10-08
大模型公司对标：360
*在通用大模型领域，360自研360智脑大模型和奇元大模型。**聚焦大模型应用，共建行业解决方案。360近年持续投资AI相关企业，主要聚焦AI行业应用，今年7月首次投资大模型服务商硅基流动，专注于构建
阅读更多2024-10-08

CSS Flexbox 全面解析

CSS Flexbox 全面解析

一、前言

二、Flex简介

三、Flex使用-容器属性

3.1 主轴对齐方式 justify-content

3.2 侧轴对齐方式 align-items

3.3 弹性盒子换行 flex-wrap

3.4 主轴方向 flex-direction

3.5 多行布局 align-content

3.6 间写 flex-flow

3.7 间距 gap

四、Flex使用-项目属性

4.1 排列顺序 order

4.2 放大比例 flex-grow

4.3 缩小比例 flex-shrink

4.4 初始大小 flex-basis

4.5 简写 flex

4.6 交叉轴对齐 align-self

五、总结

5.1 应用举例

5.2 总结

相关文章