关于弹性盒子你需要知道的一切。打造精彩网站

视频讲解

我是谁？

什么是 Flex box 以及我们为什么需要它。

如何使用弹性框？

内容对齐

对齐项目

柔性包装

弯曲方向

一些其他属性。

包起来

您可能觉得有用的文章

无论您是初学者还是高手，如果您想打造非凡的网站，如果您想打造惊艳的 UI/UX，那么这篇 CSS 进阶系列文章不容错过。本文将探讨 CSS 弹性框。弹性框在 CSS 中至关重要，借助它，我们可以轻松创建任何类型的网站。相信我，如果您坚持学习这一系列 CSS 知识，您一定能像我一样打造出精彩的网站。在今天的文章中，您将学习弹性框、它的用例以及一些属性。让我们快速开始吧。

视频讲解

你也可以观看视频讲解😊

我是谁？

开始之前，如果你不认识我，我叫 Kunaal，来自印度，负责 Modern Web YouTube 频道的运营。我制作 Web 开发相关内容，帮助你掌握 Web 开发技能，我制作过关于Fullstack Ecom 网站、个人作品集、Fullstack Blogging 网站、精美页眉动画等的教程。如果你感兴趣，可以访问我的频道。

我们现在就开始吧。

什么是 Flex box 以及我们为什么需要它。

在我们了解如何使用弹性框之前，我想先了解一下为什么我们需要它。在我看来，这是最好的学习方法。

如上图所示，您可以清楚地看到，尽管我的 H1 元素仅覆盖了蓝色部分，但它仍然具有全宽，并且覆盖了整个红色部分。因此，该p元素位于下方h1。这是因为，在 HTML 中，几乎所有元素都被视为 HTML 块。因此，它们具有全宽。

但是，如果我想让这些元素并排显示怎么办？我之前说过，所有元素都像一个块，所以我们不能让它们并排显示吗？为了达到这个目的，我们flex box在 CSS 中做了一些事情。

如何使用弹性框？

一旦我们知道何时需要使用弹性框，我们就能了解如何使用它。在 CSS 中，我们可以使用来访问或使用弹性框display: flex。

好吧，如果你曾经display在 CSS 中使用过属性，你就会知道我们直接将它赋给元素。这是什么意思呢？

嗯！我的意思是，比如说，如果我想隐藏任何元素，比如说h1元素。那么我会使用display:none。

h1{
   display: none;
}

上面的代码会隐藏元素h1。我们可以flex这样使用吗？

好吧，即使我们使用了flex boxusingdisplay属性，我们也不会直接将其赋给元素，而是将其赋给最近的父元素。如上图所示，h1和p元素都有一个共同的最近父元素，即bodyelement。因此，我们将赋给display: flexbody 元素。希望您理解这一点，因为它非常重要，大多数人总是忘记应该将其赋给display: flex最近的父元素。