前端开发中，对于页面布局的要求越来越高，越来越精细，而 Info Card 布局常常作为常用的布局方式之一。本文将介绍如何使用 Flexbox 布局实现一个 Info Card 布局，这个布局既简单又实用，我们深入了解其实现方法，对于我们的技术提升将大有裨益。
1. 实现思路
Info Card 布局是一种常见的卡片式布局，类似于商城中的产品展示和评价卡片，或是个人信息卡片等等。我们想要实现这样一种布局，首先需要明确布局的基本元素，即 Card 外层容器和容器内部的主体内容。这两个元素可以看做是父元素和子元素，我们可以使用 Flexbox 布局对其进行排版。
- 父元素（Card 外层容器）：
- 定义容器的宽度和高度；
- 使用 Flexbox 布局；
- 设置容器的边距、内间距和背景色等。
- 子元素（容器内部主体内容）：
- 子元素采用垂直和水平居中的方式；
- 子元素中的每个元素按照自己的宽度占据父元素的比例；
- 子元素自动折行。
在明确了基本元素和布局方式之后，我们将会接受更具有挑战性的实现步骤，看看这些元素放在我们的代码段中，在进行一些细节的补充，就能实现一个完整的 Info Card 布局样式。
-- -------------------- ---- ------- ----- - ------ ------ ------- ------ ------- ----- -------- ----- ----------------- ----- -------- ----- ---------------- ------- ------------ ------- ---------- ----- -------------- ---- ----------- - --- --- ------- -- -- ----- - -------------- - -------- ----- ---------------- ------- ------------ ------- ---------- ----- ---------- ----- - ------------ - ------ ---- ------- ----- ----------- ------ - ------------------ - ------ ---- ------- ----- ------------- ----- -------- ----- --------------- ------- ---------------- -------------- - ------------ - ---------- ------- -------------- ---- - --------------- - ---------- ----- - -------------- - ----------- ----- -------- ----- ---------- ----- ---------------- --------- - ------------- - -------- --- ----- ------------ ---- ---------- ------- -------------- ---- ------- ----- ----------------- -------- ------ ----- ------- -------- -
通过上面这段 CSS 代码，我们可以实现一个基本的 Info Card 布局的样式。
2. 示例展示
为了更好的展示我们的代码，我们在以下示例中将使用一个简单的 Info Card 布局，其中包括一张图片、一些文本和几个按钮。
HTML 代码：
-- -------------------- ---- -------
---- -------------
---- ------------------- ------------------------------- ----------- --
---- --------------------------
--- ------------------------ ---- ------------
-- -----------------------
---- -- -- ------- -- -- ---- ---- ------ ----- --------
----
---- ----------------------
------- ------------------------- -------------
------- ------------------------ -- -------------
------
------
------构建基本的 HTML 结构中，我们分为两个主要的元素：.card作为父容器，.card__description 作为子元素。.card__media 元素是一张图片，占父容器的 1/3 空间。.card__description 元素占据父容器的 2/3 空间，包含一个标题，一段文本和两个按钮。这个结构非常简单并且非常适合使用 Flexbox 布局。
CSS 代码：
-- -------------------- ---- ------- ----- - ------ ------ ------- ------ ------- ----- -------- ----- ----------------- ----- -------- ----- ---------------- ------- ------------ ------- ---------- ----- -------------- ---- ----------- - --- --- ------- -- -- ----- - -------------- - -------- ----- ---------------- ------- ------------ ------- ---------- ----- ---------- ----- - ------------ - ------ ---- ------- ----- ----------- ------ - ------------------ - ------ ---- ------- ----- ------------- ----- -------- ----- --------------- ------- ---------------- -------------- - ------------ - ---------- ------- -------------- ---- - --------------- - ---------- ----- - -------------- - ----------- ----- -------- ----- ---------- ----- ---------------- --------- - ------------- - -------- --- ----- ------------ ---- ---------- ------- -------------- ---- ------- ----- ----------------- -------- ------ ----- ------- -------- -
使用 flex 属性，我们指定了 display: flex;，作为容器应用 Flexbox 布局。.card 容器使用 justify-content: center; align-items: center; 分别对其子元素进行垂直和水平居中。.card__description 子元素内部采用了垂直方向上的 flex-direction: column;来排列它的子元素，并且使用 justify-content: space-between; 使其在容器内部垂直方向上分散排列。其他的 CSS 属性也非常重要的，他们分别指定和显示子元素的宽度、高度和其他一些样式。
实际的效果如下图所示：
3. 总结
通过本文详细地介绍了如何使用 Flexbox 布局实现 Info Card 布局，我们可以看到这是一种非常优雅和简单的布局方式，适用于各种实际场景。我们希望这篇文章帮助您更深入地了解 Flexbox，并为您的前端开发路径提供有用的指导和启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646da066968c7c53b0c456b0