随着手机和平板电脑的流行，移动设备已经成为我们日常生活中必不可少的组成部分，因此，在开发 Web 应用程序时，我们需要设计一种适合这些设备的布局方式，这就书 Flexbox 的出现的原因。Flexbox布局可以让我们更方便地进行自适应网页设计。
同时，卡片布局也是一个非常受欢迎的设计方式，许多应用程序都采用卡片布局。如何将这两种方式结合起来，实现可滚动的卡片布局呢？本文将详细讲述一种实现方法，并提供完整的示例代码。
Flexbox 布局的基本概念
在深入讲述如何实现可滚动的卡片布局之前，我们需要先了解 Flexbox 布局的基本概念。以下是 Flexbox 的一些基础术语：
- 容器（container）：启用 Flexbox 布局的元素。
- 项目（item）：容器中的子元素，可以是任何元素。
- 主轴（main axis）：Flexbox 布局中，项目沿着的方向。
- 交叉轴（cross axis）：Flexbox 布局中，与主轴垂直的方向。
- 主轴开始（main start）：在主轴上，项目的起始位置。
- 主轴结束（main end）：在主轴上，项目的结束位置。
- 交叉轴开始（cross start）：在交叉轴上，项目的起始位置。
- 交叉轴结束（cross end）：在交叉轴上，项目的结束位置。
- 主轴对齐方式（main axis alignment）：控制项目在主轴方向的对齐方式。
- 交叉轴对齐方式（cross axis alignment）：控制项目在交叉轴方向的对齐方式。
实现可滚动的卡片布局
下面，我们将介绍如何使用 Flexbox 布局实现可滚动的卡片布局。
首先，我们需要创建一个 Flexbox 容器，将所有的卡片项放在其中。在 HTML 中创建一个如下所示的 Flexbox 容器：
-- -------------------- ---- ------- ---- ------------------ ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ------
然后，我们需要定义容器的样式。我们需要将容器设置为 Flexbox 布局，并设置主轴方向为横向。我们还需要设置容器的宽度和高度，为了方便滚动，我们将容器的宽度设置为 100%。
.container {
display: flex; /* 设置容器为 Flexbox 布局 */
flex-direction: row; /* 设置主轴方向为横向 */
width: 100%; /* 设置容器宽度为100% */
height: 200px; /* 设置容器高度，为了方便滚动 */
overflow-x: scroll; /* 设置容器水平滚动条 */
}接下来，我们需要为容器中的卡片项定义样式。我们将每个卡片项设置为相同的宽度和高度，并设置一些基本的样式属性，如边框、背景色等。这里的卡片项可以是任何元素，例如 div 或者 article。
.card {
width: 300px; /* 设置卡片宽度 */
height: 150px; /* 设置卡片高度 */
border: 1px solid #ddd; /* 设置边框 */
background-color: #fff; /* 设置背景色 */
margin-right: 10px; /* 设置卡片项之间的间距 */
}至此，我们已经完成了可滚动的卡片布局的基本实现。但是，如果你使用了这段代码，你会发现一个问题：卡片项是否排满后，容器的宽度不够，不能滚动。
这时候，我们需要通过设置 min-width 或者 flex 属性来强制容器自适应卡片项数量。
如果我们想让容器根据卡片项数量来自适应宽度，我们可以为容器添加 flex-wrap: wrap 属性，这样当卡片项数量超过容器的宽度时，卡片项会自动换行，而不是压缩宽度。
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap; /* 添加 flex-wrap 属性，启用自动换行，从而自适应 */
width: 100%;
height: 200px;
overflow-x: scroll;
}如果我们想要在每行卡片数量相同时让容器自适应宽度，我们需要使用 flex-basis 属性。这个属性指定了项目在主轴上的初始大小，即卡片项的宽度。如果此处设置为 0 或者 auto，则容器会基于每行卡片项数量相同的原则来计算尺寸。
.card {
flex-basis: 0; /* 设置基础宽度为 0 */
width: 300px;
height: 150px;
border: 1px solid #ddd;
background-color: #fff;
margin-right: 10px;
}总结
通过上述方法，我们可以更容易地实现可滚动的卡片布局。这种布局方式非常适合移动设备，并且可以根据卡片数量自适应宽度。同时，该方案也能与 Flexbox 布局的其它功能完美结合，例如主轴对齐和交叉轴对齐等。
最后，提供完整示例代码如下所示：
-- -------------------- ---- ------- ---- ------------------ ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ------
-- -------------------- ---- ------- ---------- - -------- ----- -- ----- ------- -- -- --------------- ---- -- --------- -- ---------- ----- -- -- --------- --------------- -- ------ ----- -- ----------- -- ------- ------ -- ------------- -- ----------- ------- -- --------- -- - ----- - ----------- -- -- ------- - -- ------ ------ -- ------ -- ------- ------ -- ------ -- ------- --- ----- ----- -- ---- -- ----------------- ----- -- ----- -- ------------- ----- -- ---------- -- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476a97e968c7c53b0352262