如何使用 Flexbox 创建现代 CSS 卡片设计布局

多亏了 Flexbox，CSS3 中的一种新布局模式，我们可以将所有的卡片排成一行——从字面上看。 卡片设计在过去几年中越来越受欢迎。 您可能已经注意到，社交媒体网站已经真正接受了卡片。 Pinterest 和 Dribbble 使用卡片布局来展示信息和视觉效果。 如果你喜欢 Material Design，谷歌的卡片在他们的模式库中有很好的描述。

我个人喜欢卡片布局的可读性和可滚动性。 它们以一种易于浏览、滚动和一次扫描的方式呈现完美的信息“爆发”。

如何创建卡片布局

如果您曾经尝试过成行的等高内容，您就会知道构建它们并不总是那么容易。 过去，您可能不得不做很多摆弄才能使其正常工作。 感谢 Flexbox，那些日子已经过去了。 根据您需要提供的浏览器支持级别，您可能必须包含一些后备功能，但如今浏览器对此功能的支持非常可靠。 为了安全起见，请务必在可信赖的 Can I use 上查看 Flexbox。 请记住，您永远不应该在您的实时网站上进行更改。 尝试使用 Local，一个免费的本地 WordPress 开发应用程序。

Flexbox 的基本思想是您可以将容器的 display 属性设置为flex ，这将“伸缩”其中所有容器的大小。 等高的列以及缩放和收缩选项将简化如何创建高级布局。 从卡片开始就像是 Flexbox 备忘单，但是一旦掌握了基础知识，就可以创建更复杂的布局。

Flexbox 和多功能性

卡片用途广泛，具有视觉吸引力，并且易于在大型和小型设备上进行交互，非常适合响应式设计。 每张卡片都充当内容容器，可以轻松放大或缩小。 随着屏幕尺寸变小，它们一行中的卡片数量通常会减少，并且它们开始垂直堆叠。 有额外的灵活性，因为它们可以是固定的或可变的高度。

如何创建布局

我们将创建一个 Flexbox 卡片布局，在大屏幕上有一排四个水平容器，在中型屏幕上有两个，在小设备上有一列。

下面是创建显示四张卡片的基本布局的代码片段。 我不包括内部卡片内容（因为在代码示例中太长了），所以一定要在里面放一些入门内容（并且四张卡片的内容量会有所不同）。 此外，此处显示的是一排四张卡片，但如果您想查看多行内容的行为，可以添加更多卡片。 所有代码都可以在 Codepen 上找到。

要以网格模式显示我们的布局设计，我们需要从外部开始并逐步进入。确保引用正确的容器很重要，否则事情会变得有点混乱。

具有.cards类的部分是我们首先要定位的部分。 容器的 display 属性是我们需要更改为flex的。

这是您要开始的 HTML：

<div class="centered">

            <section class="cards">
                
                <article class="card">
                   <p>content for card one</p>
                </article><!-- /card-one -->

 	<article class="card">
                   <p>content for card two</p>
            </article><!-- /card-two -->

<article class="card">
                  <p>content for card three</p>
            </article><!-- /card-three -->

<article class="card">
                   <p>content for card four</p>
            </article><!-- /card-four -->

	</section>
</div>

这是开始的CSS：

.cards {
   display: flex;
   justify-content: space-between;
}

弹性属性

在深入了解之前，最好了解一下 flex 属性的基础知识。 flex 属性指定项目的长度，相对于同一容器内的其他灵活项目。 flex 属性是flex-grow 、 flex-shrink和flex-basis属性的简写。 默认值为0 1 auto; . 在我看来，充分理解 Flexbox 的最佳方式是使用不同的值，看看会发生什么。

弹性项目的flex-grow属性指定项目应占用弹性容器内的空间量。

flex-shrink属性指定项目将如何相对于同一容器内的其他灵活项目进行收缩。

flex-basis属性指定弹性项目的初始主尺寸。 此属性确定内容框的大小，除非使用 box-sizing 另有指定。 宽度由内容定义时默认为auto，类似于width: auto; . 它将占用由其自己的内容定义的空间。 如flex-basis: 15em;所示，可以有一个指定的值保持为真。 . 如果该值为 0，则一切都已设置好，因为该项目不会扩展以填充可用空间。

我们从display: flex; 和justify-content: space-between; 在这一点上，事情有点不可预测。 正在使用 Flexbox，尽管它现在还不是很明显。 有了这个声明，每个弹性项目都在水平行中彼此相邻放置。

在 Codepen 上看到这个。

您可能想知道为什么每个弹性项目都有不同的宽度。 Flexbox 试图找出每个项目的最小默认宽度是多少。 由于不同的字长和其他设计元素，你最终会得到这些不同大小的盒子。 为了获得一致的外观，我们需要做更多的工作。 设置包装并确定所需的宽度将有助于将它们制成统一的卡片。

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

默认情况下，弹性项目都将尝试适合一行。 添加flex-wrap: wrap; 使项目相互包裹，因为默认值为全宽。

在 Codepen 上看到这个。

全宽非常适合小型设备，因此在处理各种断点之前计划更大的屏幕时，让我们牢记这一点。 当我们改变宽度时，卡片开始看起来更均匀。

我们现在需要添加.card类来为我们的个人卡片设置样式。 这可以在.cards样式下进行。

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}

记得之前，flex 属性是简写： flex-grow为 0， flex-shrink为 1， width为 24%。 通过添加指定的宽度，这给了我们一行四行，中间有一些空间。

在 Codepen 上看到这个。

我们将justify-content属性设置为间距目的。 第一项显示在最左边，第二项和第三项显示在中间，第四项显示在最右边。 因为卡片的宽度是 24%，所以还有一些空间，因为我们在 24% 处的四列总和不是 100%。 确切地说，我们还剩下 4%。 这 4% 平均分配在每个项目之间。 所以我们在卡片之间大约有 1.33% 的空间。

在 Codepen 上看到这个。

我们也可以通过使用更精确calc 。 将flex-basis值更改为使用 calc 看起来像这样：

.card {
	flex: 0 1 calc(25% - 1em);
}

这样做的好处是浏览器会占用 25% 的空间并从中删除 1em，这会使卡片稍微小一些。

这是调整可用空间的一种巧妙方法。 1em 在项目之间均匀分布，我们最终得到了完美的布局。

直到现在，我们还真的没有谈过太多关于身高的话题。 我添加了另一行卡片来演示高度是如何工作的。 这取决于哪张卡片的内容最多——其他卡片的高度会随之而来。 因此，每一行内容将具有相同的高度。

这是一个非常“缩小”的视图，但您会注意到第一行非常高，因为第二张卡片的文本比该行中的其他卡片多。 第二行文本较少，因此总体较短。

适用于小型设备的卡

目前，我们在所有屏幕上都有四列，这并不是最佳实践。 如果您将浏览器窗口缩小，您会看到四张卡片在较小的屏幕上变得更加挤压，这对于可读性来说并不理想。 幸运的是，有了媒体查询，事情会开始变得更好。

要开始解决问题，指定的断点将确保内容在所有不同的屏幕类型上正确显示。

以下是将使用的以下断点（您也可以随意使用自己的断点，这些概念仍然适用）：

@media screen and (min-width: 40em) {
    .cards {
   }

    .card {
    }
}

@media screen and (min-width: 60em) {
    .cards {
   }
    
    .card {
     }
}


@media screen and (min-width: 52em) {
    .centered {
       
    }
}

直到现在，它一直在思考。 让我们进入移动优先的心态，从min-width: 40em断点开始。

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

通过这些更改，卡片将以全屏宽度显示，并在任何小于约 640 像素宽的屏幕上堆叠在一起。 如果您将浏览器窗口扩展至高于此范围的任何内容，则返回四列。 这是有道理的，因为min-width为 40em，这是我们创建四张卡片行的地方。

这里缺少的是中间立场。 对于中档，连续两张牌比四张压扁的牌更具可读性。 在我们计算出两张卡片所在的行之前，需要添加另一个媒体查询来容纳最大的屏幕，即四张卡片所在的行。

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

min-width为 60em 的新媒体查询是声明四张卡的位置。 40em 的min-width是声明两张牌的行的位置。 50% – 1em 的 flex calc值正在发生奇迹。

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

通过这个简单的更改，现在一切正常！ 缩小和扩大浏览器窗口以确保一切正常。

在 Codepen 上看到这个。

如果您的卡片行看起来正确，那么您就可以开始了！ 如果您正在尝试本教程并且最后一行不均匀，请继续阅读。

动态内容和最后一行卡片间距

根据您的卡片数量，您可能有也可能没有愚蠢的最后一行。 如果最后一行已满或只有一张额外的卡，则不会有问题。 有时您会提前计划好内容，但如果内容是动态的，那么最后一行卡片的行为可能与您的预期不同。 如果有不止一张额外的卡片并且设置了对齐内容，它将使它们之间的空间均匀，并且可能不会与上面的行对齐。

要获得这种外观，它需要一种不同的思维方式。 我认为这不是那么有效，但它相对简单。

.cards和.card样式是在媒体查询之外完成的：

.cards {
    display: flex;
    flex-wrap: wrap;
 }

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

媒体查询是确定卡片数量的地方：

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

查看 Codepen 以查看修改后的解决方案。

希望这可以让您对 Flexbox 概念有一个基本的了解，从而帮助您入门。 Flexbox 有很好的浏览器支持，卡片布局将继续用于网站设计。 请记住，卡片布局只是您如何使用 Flexbox 的开始。

下一个：更快地设计 WordPress 网站

在本指南中，我们将介绍如何更快地工作和加快 WordPress 工作流程的技巧。 从最初的站点设置到上线，了解如何从日常工作中减少工作时间！

在这里下载免费指南！

您还使用 Flexbox 构建了什么？ 在评论中分享您的项目！