使用 CSS Flexbox 创建等高的价目表（Pricing Table）

作者： Guest Post by Jon Muller | Feb 4th, 2018

在我看来，价目表是让潜在顾客一眼就能快速捕捉并获得你的服务和优点的最简洁有效的方法。最近，我正在为我的网站寻找一种好的价目表，然后发现几乎这些所有价目表都有一个问题——它们不是垂直响应式的。我的意思是价目表的每一列都有属于它自己基于里面内容数量的高度。我需要一种所有列高度都一样的等高价目表，不使用表格。我的解决方案？CSS Flexbox.

这里有一个我将展示给你，通过使用 CSS Flexbox 创建的等高价目表的例子。注意每一列的高度是如何与兄弟列相等的，即使每一列都有它们自己不同行数的内容。此外，用来放点击按钮的最后一个 LI 也总是底部对齐的：

例子请看：Equal Height Pricing Table using CSS Flexbox.

这里是两条创建等高价目表的关键 CSS 样式：

HTML 标记

让我从 HTML 标记开始，我希望能尽量干净简洁。为此，每一个价目表我都只是简单的使用了一个 UL 列表，然后把它们用一个 DIV 容器包裹起来：

<div>
    <ul>
        <li><b>2nd Place</b><br />Herman Miler</li>
        <li><b>Weight:</b> 55 lbs</li>
        <li><b>Max Weight:</b> 330 lbs</li>
        <li><a href="#"><span></span> Check Out</a></li>
    </ul>
    <ul>
        <li><b>1st Place</b><br />Argomax Chair</li>
        <li><b>Material:</b> Nylon w/ Breathable Glass Fiber</li>
        <li><b>Head Rest:</b> Yes</li>
        "
        "
        <li><a href="#"><span></span> Check Out</a></li>
    </ul>
    <ul>
        <li><b>3rd Place</b><br />Eurotech Mesh</li>
        <li><b>Dimensions:</b> 24.8W x 47.3H</li>
        "
        <li><a href><span></span> Check Out</a></li>
    </ul>
</div>

正如你所见，每一个 UL.theplan 元素都包含了不同数量的 LI 条目。目标是让每一个 UL 的高度都一样，并且每条价格计划的最后一条 LI 条目都排在最底部。

我找到了实现这种效果的最简方式？使用 CSS Flexbox 并且给每个 UL 设置flex-direction:column 以便它们垂直的排列来适配最长 flex 子元素的高度。下面我会更详细的解释。

The CSS

这里是等高价目表的 CSS。我移除了不重要的部分，因此你可以集中那些重要的部分：

.pricingdiv{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.pricingdiv ul.theplan{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 260px; /* width of each table */
    margin-right: 20px; /* spacing between tables */
    margin-bottom: 1em;
    border: 1px solid gray;
    transition: all .5s;
}

.pricingdiv ul.theplan:hover{ /* when mouse hover over pricing table */
    transform: scale(1.05);
    transition: all .5s;
    z-index: 100;
    box-shadow: 0 0 10px gray;
}

.pricingdiv ul.theplan:last-of-type{ /* remove right margin in very last table */
    margin-right: 0;
}

/\*very last LI within each pricing UL \*/
.pricingdiv ul.theplan li:last-of-type{
    text-align: center;
    margin-top: auto; /\*align last LI (price botton li) to the very bottom of UL \*/
}  


@media only screen and (max-width: 600px) {
    .pricingdiv ul.theplan{
        border-radius: 0;
        width: 100%;
        margin-right: 0;
    }

    .pricingdiv ul.theplan:hover{
        transform: none;
        box-shadow: none;
    }
    
    .pricingdiv a.pricebutton{
        display: block;
    }
}

我通过给父 DIV 容器设置 display:flex 开始，并且允许子 flex 元素换行并水平居中，使用 flex-wrap: wrap 和 justify-content: center。所有子 UL 元素都是 flex 元素。

每一个由 UL 元素组成的价目表，都设置了 flex-direction:column。默认情况下，flex 子元素（flex children）都在水平轴展现。通过设置 flex-direction:column，我强制所有 flex 子元素的默认行为都作用在垂直面，包括黄金奖（golden prize）—— 默认等高的flex 子元素。

每一个 UL 价目表的最后一个 LI 元素底部对齐

这样，每个在 DIV 里的价目表，现在高度都一样了。但是仍然有需要改进的地方让一切看起来更精致。我想让包含在每个 UL 的最后一个 LI 中的动作按钮与表格的最底部对齐。

我们需要两步来实现。首先，我通过 display: flex 把每个 UL 价目表也设置为 flexbox 容器。一旦这样做了，我可以使用 margin 属性来对齐一个和兄弟元素不同的特殊的子元素，比如左或者右对齐的水平 flex 子元素，或者这种情况下的垂直 flex 子元素，上面或者底部。

要让每个最后一个 LI 元素底部对齐，需要给这些元素添加点魔法原料 margin-top: auto：

.pricingdiv ul.theplan li:last-of-type{
    text-align: center;
    margin-top: auto; /* align last LI (price botton li) to the very bottom of UL */
}

如果你不熟悉使用 margin 让一个 flex 子元素和其他子元素对齐的技巧，请看 this very helpful section on aligning CSS flex children elements。

结论

正如你所看到的，CSS Flexbox可以创建高度相等，响应式，甚至咋页面居中的元素。它帮助我解决了我见过的许多CSS定价表的问题。

【译】使用 CSS Flexbox 创建等高的价目表

使用 CSS Flexbox 创建等高的价目表（Pricing Table）

HTML 标记

The CSS

每一个 UL 价目表的最后一个 LI 元素底部对齐

结论