Flexbox 是一种 CSS3 新增的一种布局模式，可以轻松创建灵活的响应式布局。在本文中，我们将学习如何使用 Flexbox 实现一个卡片风格的布局。这个布局是一种广泛应用于现代网站的双栏设计，其中每个卡片都包含图片和文本。我们将介绍如何使用 Flexbox 创建这种布局，以及如何在不同的屏幕尺寸下使其响应式。
开始之前
在开始使用 Flexbox 之前，让我们快速回顾一下一些基础概念。Flexbox 是一个用于排列元素的布局模式，它使得你可以更容易地控制元素的位置和大小。使用 Flexbox，你可以将元素沿主轴（水平方向）和侧轴（垂直方向）进行布局。
在 Flexbox 中，存在主轴和侧轴，这取决于 flex-direction 属性的值。默认情况下，主轴是从左到右的，侧轴是从上到下的。
Flexbox 具有一些重要的属性，例如：
display: flex;：启用 Flexbox 布局，并创建 Flex 容器。flex-direction: row;：设置主轴的方向。justify-content: center;：设置 Flex 容器中子元素的对齐方式。align-items: center;：设置 Flex 容器中子元素在侧轴上的对齐方式。
实战：创建一个卡片布局
现在我们已经准备好开始创建我们的卡片布局了。我们将使用一个包含两个卡片的 Flex 容器。
-- -------------------- ---- -------
---- -----------------------
---- -------------
---- ------------------------------------- --------- -------
-------- ----------
------- ---------------
------
---- -------------
---- ------------------------------------- --------- -------
-------- ----------
------- ---------------
------
------现在，我们需要设置 .card-container 和 .card 的样式。
首先，我们需要将 .card-container 设置为 Flex 容器，并指定主轴方向为从左到右。
.card-container {
display: flex;
flex-direction: row;
}接下来，我们将设置 .card 元素的样式，以便它们正确显示在 Flex 容器中。我们将通过以下方式实现这一点：
- 将每个
.card容器设置为flex: 1;，以使它们占据相等的空间。 - 将每个
.card元素的margin设置为10px;，以在卡片之间创建一些间距。 - 设置每个
.card元素的flex-basis为0;，以确保它们可以缩放成相同的大小，不论其内容的大小如何。 - 设置每个
.card元素的flex-grow为1;，以确保它们占用可用空间的相等部分。
.card {
flex: 1;
margin: 10px;
flex-basis: 0;
flex-grow: 1;
}最后，我们需要设置卡片的内部内容，确保它们在卡片中正确对齐。我们将使用以下样式：
- 设置
img元素的max-width为100%;，以确保图片可以缩放到适当的大小。 - 设置
h2元素的margin-bottom和font-size，使其在卡片中居中对齐。 - 设置
p元素的margin-bottom和line-height，使其在卡片中居中对齐。
-- -------------------- ---- ------- ----- --- - ---------- ----- - ----- -- - -------------- ----- ---------- ------- - ----- - - -------------- ----- ------------ ---- -
现在，我们的卡片布局已经完成了。我们可以看到，这个布局在不同的屏幕尺寸下都表现良好，感谢 Flexbox 自适应的特性。
总结
在本文中，我们学习了如何使用 Flexbox 创建一个卡片风格的布局。我们了解了 Flexbox 基础概念的重要性，以及如何使用 Flexbox 的一些关键属性来控制元素的位置和大小。
Flexbox 是一个强大的工具，它可以帮助我们创建灵活的响应式布局。通过掌握它的基础知识，我们可以在不同的屏幕尺寸下轻松地创建出色的布局。
示例代码：（https://codepen.io/jack-zh/pen/qBbeMJo）
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf70cab5eee0b5256bd8a0