了解 CSS Flexbox：初学者指南！！！

？目录

1. CSS Flexbox 简介
2. 基本属性
3. 高级属性
4. 结论

---

?️ CSS Flexbox 简介

CSS Flexbox 是解决您所有布局问题的终极解决方案。在本文中，我们完全专注于掌握 Flexbox、探索它的属性以及如何使用它轻松创建令人惊叹的响应式设计。让我们深入研究并使这些布局变得无缝。

灵活框布局（Flexbox）是一种一维布局方法，它沿单个轴（行或列）排列项目。如果你是像我一样的视觉学习者，这可能没有多大意义，所以让我给你画一张图 -

想象一下，你有一个盒子，里面装满了你最喜欢的东西，可能是书，也可能是你最喜欢的零食，无论什么东西都会让你的船摇摇欲坠，但它们完全混乱。 Flexbox 就像一个神奇的组织者，带着一点强迫症，突然出现来拯救世界。它将所有内容整齐地排列在行和列中，以满足您的确切需求。

无论您希望项目均匀分布、分组到一侧还是完美居中，Flexbox 都是您的首选。现在我们知道 Flexbox 是强迫症的组织者，让我们深入了解它用来实现奇迹的工具！以下是它的基本属性：

** 基本属性 **

1. 显示：flex：这就是一切开始的地方！通过将此属性添加到容器（装满您最喜欢的零食的盒子）中，所有零食（子元素）将默认沿单个轴整齐排列，即一行。但别担心，如果您愿意，您可以切换到列！”

注意： 要与 CodePen 示例进行交互，请单击插图右上角的“在 CodePen 上编辑”文本。这使您可以实时使用代码！

在 CodePen 上进行数值实验：

2。 flex-direction: 这决定了你的零食将排列在哪个方向。请记住，默认情况下，零食排成一排，但 flex 方向为你提供了力量来改变这一点。这是它的值：

a。 row(默认):你的零食从左到右整齐地排成一排。

b。 row-reverse: 这些物品翻转方向并从右向左排列，非常适合当你感到有点叛逆的时候！

c.专栏：你的物品垂直堆叠起来，就像一个小吃塔！想象一下每一种零食（或弹性物品）都被放置在另一个之上，形成一个美味的零食塔。

d。 column-reverse: 堆栈从底部开始向上构建。

这是一个插图，请随意更改 flex-direction 值，以便您了解它们是如何工作的。

3。 Justify-content：这是弹性容器的魔杖，它用它来分配零食之间的空间。它在某种程度上决定了零食盒中零食的排列方式。以下是它的主要选项：

a。 flex-start(default): 所有零食都聚集在行或列的开头。

b。 flex-end: 所有零食都聚集在行或列的末尾。

c. center:零食聚集在行或列的中间。

d。 space- Between: 第一个小吃被推到开头，最后一个小吃被推到末尾，其余的在它们之间均匀分布。

e。 space-around: 零食周围的空间相等。

f。空间均匀： 零食周围的空间完全相等。

这是一个插图，请随意更改 justify-content 值，以便您可以看到它们是如何工作的。

4。 Align-items：我们已经使用 flex-direction 将零食排列成行或列，现在是时候决定我们希望它们在零食容器中的位置有多高或多低了。以下是它的共同值：

a。 flex-start：在交叉轴的起点对齐项目。

b。 flex-end：在横轴末端对齐项目。

c. center：将项目沿横轴居中。

d。拉伸：拉伸项目以填充容器（块级项目的默认值）。

e。基线：沿着文本基线对齐项目。

让我们看看对齐项目的实际效果。

探索下面的代码笔，看看它的神奇作用！请随意调整 CSS，看看它如何改变对齐方式。

** 高级属性 **

1。 Align-content：align-content 属性指定多行 Flex 项目（或类比中的零食）如何在 Flex 容器（零食容器）内沿横轴间隔开。仅当有多行或多列 Flex 项目时，它才起作用，这意味着您的 Flex 容器必须包含包装内容（flex-wrap：wrap）。

Align-content 的值

a。 flex-start：所有行的零食都聚集在零食容器的顶部，使容器的其余部分感觉相当空。

b。 flex-end：成排的零食聚集在零食容器的底部，从而在顶部留下空白空间（顶部孤独）。

c.中心：一排排零食聚集在中间，在零食容器的顶部和底部留出空间。

d。 space- Between: 零食行均匀分布，第一行在顶部，最后一行在底部。

e。 space-around：行之间的间距相等。

f。 space-evenly：行之间的间距相等。

g。拉伸（默认）：我们的零食都“拉伸”以填满零食容器的高度。

话已经说完了，让我们灵活付诸行动（看看我做了什么？没有人？好吧？‍♀️）。

您可以将align-content值替换为flex-start、flex-end、center、space- Between、space-around、space-evenly或stretch来观察变化。

查看此 CodePen 的交互式插图！

？对齐项目与对齐内容：有什么区别？
尽管听起来很相似，但align-items 和align-content 并不相同。让我们澄清一下区别：

align-items 沿横轴对齐各个 Flex 项目。将其视为在单行/列中设置项目本身的对齐方式。

align-content 沿 Flex 容器的横轴对齐多行项目（当处于活动状态时，即 flex-wrap:wrap）。

？要点：
align-items 处理单个弹性容器内的所有项目，而align-content 处理多行项目（仅当有多个换行时）。

**记住**：

Property	Focus Area	When to use
Align-items	Align individual items	When you are adjusting the vertical alignment of single items
Align-content	Align rows of items	When flex-wrap: wrap is used (and there are multiple rows)

2。 Flex-wrap：此属性决定您的弹性项目（又名您最喜欢的零食）是否应该全部挤入一行/列，或者在空间不足时礼貌地包装到多行/列上。

这是它的值：

a。 nowrap（默认）：你的零食决定它们不需要喘息空间，只是挤成一排/一列。

b。包裹：现在，他们需要喘息空间，因此当第一行/列中没有更多空间时，他们溢出到下一行或下一列。

c .wrap-reverse：与换行几乎相同，但它们以相反的方式进行。从下到上或从右到左，取决于弯曲方向。

这是一个 CodePen，演示了 flex-wrap 属性的行为。您可以尝试不同的值（nowrap、wrap 和 wrap-reverse），看看 Flex 容器如何处理零食的溢出。

3。 Flex：这是一个决定性的属性，它设置 Flex 项目（我们的零食）如何增大或缩小以适应其 Flex 容器中的可用空间。它是 3 个子属性的简写：

a。 flex-grow：确定弹性项目将增长多少。

b。 flex-shrink：决定当空间紧张时弹性项目将收缩多少。

c. flex-basis：确定项目开始增大或缩小之前的起始尺寸。

这是一个 CodePen，演示了 flex 属性及其组件

随意打开它并与之交互，看看调整弹性值如何改变项目的布局。

4。 Align-self：此属性会覆盖 Flex 容器的对齐项目值。它基本上将项目在横轴上对齐。这是它的值：

a。 auto（默认）：从容器的align-items属性继承对齐方式。

b。 flex-start：将项目在横轴的起点对齐。

c. flex-end：将项目对齐到横轴的末端。

d。 center：将项目沿横轴居中。

e。拉伸：拉伸项目以填充横轴（如果不是固定大小）。

f。基线：沿着文本基线对齐项目。

查看此 CodePen 的交互式插图！

？结论
CSS Flexbox 简化了我们处理布局的方式。借助一些关键属性，例如 display：flex、flex-direction、justify-content 和align-items，您可以轻松制作响应灵敏且对齐精美的设计。

？想要深入了解吗？这里有一些很棒的资源：

1. CSS 技巧：Flexbox 完整指南

涵盖每个 Flexbox 属性和用例的详细指南。

1. MDN 网络文档 - CSS Flexbox

包含解释、示例和浏览器兼容性的官方文档。

掌握任何事物的关键是持续不断的练习，所以一定要尽可能多地练习以巩固你的理解。您使用这些工具越多，您就会对自己创建精美布局的能力越有信心。

下次再见，你友好的邻居作家（是的，这在我看来是有道理的）。 ？再见！！！

以上是了解 CSS Flexbox：初学者指南！！！的详细内容。更多信息请关注PHP中文网其他相关文章！