掌握CSS布局是Web设计中最具挑战性的部分之一。特别是，如果您只是去看文档并开始以非常基本的示例阅读干燥材料，那么对这些概念的实际了解就很困难了。

在这一系列帖子中，您将通过可以在项目中使用的实践来学习CSS布局。

准备

直接看到我们工作结果的最简单方法是使用DoTenX UI-Builder构建我们的网站。

如果您没有帐户，则可以免费创建一个帐户并遵循本教程。值得一提的是，您可以免费在dotenx上构建无限数字网站，每当您达到项目的初始限制时，都可以要求增加。

注意：当您在dotenx上创建一个项目时，请切换到高级模式，因为我们想完全控制HTML元素和样式。

示例1-个人资料卡

让我们将以下布局设计为我们的第一个示例。

CSS属性我们学习：

显示
flex方向（列）
Jusify-content

该组件是从Syed Raju here的出色设计中借来的。

步骤1：

我们首先添加 box 将A div 元素呈现到我们的页面。

现在，我们直接转到样式选项卡中的CSS属性部分，我们直接添加CSS属性。

添加以下属性值对：

display: flex
flexDirection: column
alignItems: center
width: 300px
backgroundColor: hsla(0, 0%, 98%, 1)

添加/应用FlexBox布局的第一步是将display属性设置为flex，该属性为我们创建了flex container（使用FlexBox布置的文档区域）。

我们希望将flex容器中的元素放在列中，这就是为什么我们将flex-direction设置为column。

您可能会注意到我们使用camelCase而不是kebab-case参考CSS属性，这是因为Dotenx UI构建器遵循ReactJS命名约定。当您渲染页面时，将在kebab-case中渲染生成的CSS属性。

我们想在中心水平对齐儿童元素（flex items），这就是为什么我们将align-items设置为center。

最后，我们设置了宽度和背景色值。

第2步：

通过从“元素”选项卡中拖动图像元素并将其放入框中。

我已经使用了Freepik的this图像，但是您可以使用自己喜欢的图像的URL或上传图像。

步骤3：

在图像元素之后添加Tex元素，该图像元素最终将呈现一个p标签。

将文本和大小设置为所需的值（在此示例中，我将其设置为2XL）。由于我们的重点是flexbox，我使用的是UI构建器的简单选项来设置字体尺寸，这是使用dotenx ui builder的另一个优点，使我们可以专注于我们想要的内容。

第4步：

与步骤3完全相同，只是带有不同的文本和较小的尺寸和略微褪色的颜色。

步骤5：

作为最后的触摸，为了更准确地实现我们的组件，我们设置了文本的最高边缘，并将边框半径为10px，为我们在步骤1中创建的Flex容器，并给出底部填充。

在此发布的页面中，您可以看到最终结果：

https://gracious-lederberg-3196150654.web.dotenx.com/index.html

示例2-个人资料卡行

相同的美化设计可用于显示Flexbox布局的更有趣的功能。

CSS属性我们学习：

flex方向（行）
Jusify-content

步骤1：

添加一个宽度为100％的盒子，具有以下属性：

display: flex
flexDirection: row
width: 100%

使用这些属性，我们使DIV具有水平布局。请记住，flex方向的默认值无论如何都是 row 。我们还设置宽度以确保我们的DIV扩展页面的整个宽度（如果您知道宽度的替代方案，请发表评论：100％）。

第2步：

添加我们在示例1中创建的配置贺卡的四个副本到我们在步骤1中创建的DIV。

避免重复可以使用我使用的技巧的步骤。只需从“布局”选项卡导出元素，然后将导出的元素添加到框。这与高级场景中使用的可重复使用组件的概念非常相似，例如使用React，Vue等。

导出：

使用：

将卡添加到父级后，您可以检查预览，并且应该有类似的东西：

步骤3：

您可以在预览中看到，我们所有的项目都彼此隔开，没有它们之间的任何空间。

要解决此问题，将Flex Container Box的justify-content属性设置为space-around，这就是结果：

在这里您可以找到已发布的结果（所有图像均来自Freepik）：
https://gracious-lederberg-3196150654.web.dotenx.com/flex-row.html

try-it ：现在调整浏览器窗口大小，以在较小的屏幕中查看结果。你看到什么问题吗？您如何看待我们可以解决这个问题？在下面的评论，不要忘记遵循本系列的下一部分，向您展示如何处理此类案例。

概括

在本教程中，我们看到了如何使用Flexbox构建垂直和水平布局。我们了解了一些常用的术语，例如Flex容器和Flex项目。

我们还了解了设置布局方向以及调整Flex项目的布置。值得一提的是，根据经验法则，如果您想将flex项目的顺序设置为与Flex容器相同的方向，请使用justify-content，否则请使用align-items。

如果您有任何疑问，请随时在下一个教程中询问并与您见面。