【学习CSS4】详解Flexbox

天才和人才就差了二

于 2024-07-29 16:37:32 发布

阅读量836

点赞数 15

文章标签：学习 flex

本文链接：https://blog.csdn.net/wenhui6/article/details/140657044

版权

曾经，我天真地认为，浏览过即等于掌握；然而，职场多年的洗礼后，我才深刻领悟到这一认知的浅薄。那些一闪而过的知识碎片，如细沙般从指缝滑落，待到真正需要之时，却寻觅无踪，宛如海市蜃楼，令人怅然若失。

形成了时刻笔记的习性，就像拥有了一个忠实的旅伴，在漫漫人生路上，它记录下每一次心跳，每一缕微笑，不让任何美好稍纵即逝。这是一种对生命的热爱，对细节的关注，让平淡生活因记录而精彩，因回忆而丰满。

废话结束，干货来了！

Flexbox 是一种非常强大的布局模式。当我们真正了解它是如何工作的时，我们可以构建自动响应的动态布局，并根据需要重新排列。

一、先看要实现的效果

不废话，直接上干货

下面是相关的css

form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}
.name {
  flex-grow: 1;
  flex-basis: 160px;
}
.email {
  flex-grow: 3;
  flex-basis: 200px;
}
button {
  flex-grow: 1;
  flex-basis: 80px;
}

完整的例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>详解Flexbox布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .flex1 {
        padding: 10px;
        background: #1a1b1b;
      }
      form {
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        gap: 16px;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        color: #fff;
        width: 600px;
        margin: 0 auto;
      }
      .name {
        flex-grow: 1;
        flex-basis: 160px;
      }
      .email {
        flex-grow: 3;
        flex-basis: 200px;
      }
      button {
        flex-grow: 1;
        flex-basis: 80px;
      }
      input {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="flex1">
      <div style="color: #fff;width: 600px;margin: 0 auto;">
        <div>
          当前form的宽度：<span id="rangeWidth">600</span>
        </div>
        <input type="range" min="200" max="600" value="600" class="slider" id="myRange">
      </div>
      <form id="demo">
        <label class="name" for="name">
          姓名：<input type="text" id="name" />
        </label>
        <label class="email" for="email">
          邮箱：<input type="text" id="email" />
        </label>
        <button>提交</button>
      </form>
    </div>

    <script>
      window.onload = function () {
        const slider = document.getElementById('myRange');
        const output = document.getElementById('demo');
        const rangeWidth = document.getElementById('rangeWidth');

        slider.oninput = function() {
          output.style.width = this.value + 'px';
          rangeWidth.innerHTML = this.value;
        }
      }
    </script>
  </body>
</html>

我记得以前遇到这样的需求时，我完全感到困惑。当我学习了Flexbox 的基础知识后，这绝对是魔法，太神奇了！

在接下来的文中，我将继续分享详细的 Flexbox 知识。我们会通过每一个属性来学习 Flexbox 是如何工作的。无论你是CSS的初学者，还是已经使用Flexbox多年的人，我敢打赌你会学到很多东西！

让我们开始吧！

二、Flexbox 简介

CSS由许多不同的布局算法组成，官方称为“布局模式”。每种布局模式都是CSS中自己的子语言。默认的布局模式是 Flow 布局，但我们可以通过更改父容器上的display为 Flexbox。

当我们将 display 设置为 flex 时，我们创建了一个“flex formatting context”。这意味着，默认情况下，所有子项都将根据 Flexbox 布局算法进行定位。

每种布局算法都旨在解决特定问题。默认的“流”布局旨在创建流文档;它本质上是Microsoft Word布局算法。标题和段落作为块垂直堆叠，而文本、链接和图像等内容则不显眼地位于这些块中。

那么，Flexbox解决了什么问题呢？Flexbox 就是将一组项目排列成一行或一列，并让我们对这些项目的分布和对齐进行精准的控制。顾名思义，Flexbox 是关于灵活性的。我们可以控制内容是增长还是缩小，额外空间的分配方式等等。

你可能想知道：既然 CSS Grid 在现代浏览器中得到了很好的支持，那么 Flexbox 不是已经过时了吗？
CSS Grid 是一种很棒的布局模式，但它解决的问题与 Flexbox 不同。我们应该学习这两种布局模式，并使用正确的工具来完成这项工作。
Flexbox 在动态、流畅的 UI 中以垂直或水平列表排列项目时仍然占据主导地位。我们将在本文中看到一个示例，这是使用 CSS Grid 无法轻松完成的。
作为一个对 CSS Grid 和 Flexbox 都感到满意的人，我仍然发现自己经常接触 Flexbox！

三、Flex direction 布局方向

如上所述，Flexbox 就是控制一行或一列中元素的分布。默认情况下，项将并排堆叠成一行，但我们可以控制是行还是列显示。

flex-direction: row ，主轴从左到右水平延伸，块内的子项从左到右排列。

flex-direction: column ，主轴从上到下垂直运行，块内的子项从上到下排列。

先看效果：

在 Flexbox 中，一切都基于主轴。该算法不关心垂直/水平，甚至不关心行/列。所有规则都是围绕这个主轴和垂直运行的十字轴构建的。

当我们学习了 Flexbox 的规则时，我们可以从水平布局无缝切换到垂直布局。所有规则都会自动适应。此功能是 Flexbox 布局模式所独有的。

下图是这些规则的快速可视化效果：

在 Flexbox 中，我们决定主轴是水平运行还是垂直运行。这是所有 Flexbox 计算都与此挂钩的根。

四、Flex direction 对齐方式

我们可以使用属性 justify-content 更改子项沿主轴的分布布局方式。

当涉及到主轴时，我们通常不会从对齐单个子项的角度来考虑。相反，这完全与组的分布有关。

我们可以将所有项目集中在特定位置（有 flex-start 、 center 和 flex-end ），或者我们可以将它们分开（带有 space-between 、 space-around 和 space-evenly ）。

先看下图（gif录制软件略有瑕疵）：

对于十字轴，垂直方向，情况略有不同。我们使用该属性align-items

如图：

是不是挺有趣的，在align-items 中，我们有一些与 justify-content 相同的选项，但没有完全重叠，如下图。

为什么他们不共享相同的选项？我们很快就会解开这个谜团，首先，我先分享另一个对齐属性： align-self 。

与 align-items 和justify-content不同 ， align-self ，它应用于子元素，而不是容器。它允许我们更改特定子项沿十字轴的对齐方式，请看下图：

align-self 具有与 align-items 相同的所有值。事实上，它们改变了完全相同的事情。 align-items 是句法糖，一种方便的速记，可以自动一次在所有孩子上设置对齐方式。

没有 justify-self 。要理解为什么不，我们需要更深入地研究 Flexbox 算法。

未完待续.......

天才和人才就差了二

关注

15
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
0
评论
【学习CSS4】详解Flexbox

曾经，我天真地认为，浏览过即等于掌握；然而，职场多年的洗礼后，我才深刻领悟到这一认知的浅薄。那些一闪而过的知识碎片，如细沙般从指缝滑落，待到真正需要之时，却寻觅无踪，宛如海市蜃楼，令人怅然若失。形成了时刻笔记的习性，就像拥有了一个忠实的旅伴，在漫漫人生路上，它记录下每一次心跳，每一缕微笑，不让任何美好稍纵即逝。这是一种对生命的热爱，对细节的关注，让平淡生活因记录而精彩，因回忆而丰满。
复制链接

扫一扫