在前端开发中，卡片式布局已经成为了非常流行的设计风格。卡片式布局可以让网页结构更加清晰，方便用户查阅信息。而 CSS Flexbox 技术基于弹性盒模型可以非常方便的实现卡片式布局。本文将为大家介绍几种主流的卡片式布局实现方法。
1. 等高卡片布局
等高卡片布局是指每个卡片的高度相等，宽度可以设置不同，可以显示不同大小的图片和文字。在 CSS Flexbox 技术下可以采用 flex-wrap 属性，让每一行都留下一个空缺，每行的卡片展现形成等高的效果，代码实现如下：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ------ ---- ------- ----- ------- -- --------------- ---- ----------------- -------- - ----- --- - ------ ----- ------- ----- ----------- ------ -
在上述代码中，我们首先将容器的 display 属性设置为 flex，以开启 Flexbox 交互模型。接着在容器中定义每个卡片的样式，通过计算 padding-bottom 属性的值，实现等高布局的效果。为了让图片适应大多数卡片尺寸，我们将图片的样式定义为等比缩放填满整个卡片区域。
2. 自适应卡片布局
自适应卡片布局是指卡片的高宽可以自适应，根据所占容器的比例大小来调整每个卡片的大小。这种布局方式下可以通过 flex-grow 属性来实现，代码实现如下：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- - ----- - ------- ---- ---------- -- ----------- ------ ---------- ----- ------- -------- -------------- ---- - ----------- - ---------- ------------ -
在上述代码中，我们同样将容器的 display 属性设置为 flex，显示出弹性盒子模型，通过 justify-content 属性来控制每个卡片的位置。接着为每一个卡片设置 flex-grow 属性，卡片将会按照所占容器比例来进行自适应布局。max-width 属性的设置能使卡片大小不超过其所占容器的大小。最后我们增加卡片hover效果，当鼠标滑过时卡片放大。
3. 瀑布流卡片布局
瀑布流卡片布局可以让每个卡片混乱而不会有规律布局，给人以清新、自然的感觉，这种布局方式下可以使用 column-count 属性来实现，代码实现如下：
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ------- ------------- -- ----------- ----- -------- ----- - ----- - ------ ----- -------------- ----- ------- -------- ----------------- -------- - ----- --- - ------ ----- -------------- ---- --------- ------- -
在上述代码中，我们将容器的 display 属性设置为 flex，并设置容器的方向为竖直(column)。接着设置卡片的列数为3，列距为20px，并增加内边距。在卡片的样式中我们采用了非常简洁的方式实现瀑布流式布局的效果。由于卡片间距和内边距之和为40px,所以每个卡片的宽度为100%-40px=60%，可以很好的和容器的column-count属性同时使用，显示出涌动的瀑布流效果。
总结
以上介绍的三种主流卡片式布局均采用了 CSS Flexbox 技术实现，都能很好的为我们提供网页的装饰效果。我们可以按照需求进行选择使用，提高页面可阅读性和可视化感受。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64649c1d968c7c53b057d9e9