这是一系列“ CSS布局”教程中的第二个教程。在previous tutorial中，我们通过两个示例学习了Flexbox的基本概念。

在这篇文章中，我将演示我们可以在Flexbox布局中使用的两个简单但非常重要的CSS属性：

1. gap（列隙/行 - 差距）

2. flex-wrap

我将使用DoTenX UI构建器，您可以创建一个免费帐户并与我一起关注。

这是我们要使用Flex-Box和CSS属性gap和flex-wrap

获得的布局

我们正在使用上一个教程中使用Flex布局创建的卡元素，但是，您甚至可以使用具有固定宽度的简单Box元素，以查看这些CSS属性的效果。

t his Freepik 的图像在本教程中使用。

步骤1：

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

第2步：

在框中添加6份卡元素的副本，这就是它的外观：

注意： box的display属性的默认值是block，这就是为什么将组件放在列中的原因。

步骤3：

将包装盒的display属性设置为flex，因此我们将其制成 flex容器。

您可以看到我们的物品彼此相邻放置，并且缩小了以适合默认行为的框。

第4步：

将flex-wrap属性设置为wrap。此属性设置了flex项目是强制到一行还是可以包裹在多行上。

如上图所示，元素被包裹在多行上。但是，有一个问题。元素之间没有空间。

步骤5：

将包装盒的column-gap属性设置为40px。

使用column-gap属性，我们可以在列之间创建一个空间，但是，还有另一个问题。行之间没有空间。

步骤6：

将包装盒的row-gap属性设置为40px。

最后，通过闪回上一个教程，我们将justify-conent设置为center以将卡中心放在屏幕上。

现在尝试调整窗口大小，看看会发生什么。这是您期望的吗？

如果您有任何疑问，请发表评论，然后跟随我进行实用教程。

记住在https://dotenx.com创建您的免费帐户，以轻松提高您的网页设计技能并与所有人分享结果。