如何拉伸 flexbox 的元素？

Question

这是我取得的成就：

这就是我想要完成的。我在第三列中挣扎（它缺少两件事：background-color（灰色，它应该填充白色 space）和列中间的点对齐）。

我不确定我错过了什么。这是我当前的代码：

HTML代码

You have 4 items in your cart

<article class="cart-item">
    <div class="left">
        <img src="images/item1.jpg"></img>
    </div>

    <div class="center">
        <h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
        <span class="description">Shipping 3-day with UPS</span>
        <span class="description">Color: Gray</span>
        <span class="description">Size: 28.5</span>
        <span class="price">.00</span>
    </div>

    <div class="right">
        <div class="grouped-dots">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</article>

CSS代码

.cart-item {
    height:100%;
    overflow: hidden;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.left, .center {
    padding-top: 10px;
    padding-bottom: 10px;
}

.left {
    flex: 0 0 33.33%;
    padding-left: 15px;
    padding-right: 15px;
}

.left img {
    max-width: 100%;
}

.center {
    flex: 1 0 0;
    padding-right: 15px;
}

.right {
    flex: 0 0 15px;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
}

.right .grouped-dots {
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    background-color: #F5F5F5;
    flex-direction: column;
    justify-content: center;
}

.cart-item .grouped-dots span::after {
    content: '.';
    font-size: 40px;
    font-family: 'Open Sans', sans-serif;
    color: #CCCCCC;
    line-height: 0px;
}

Answer 1

步骤 1： 将 display: flex 添加到 .right。这将导致背景颜色拉伸整个列的高度。

.right {
    display: flex; /* NEW */
    flex: 0 0 15px;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
}

第 2 步： 将 display: flex 添加到 .grouped-dots（否则 flex-direction: column 和 justify-content: center 将不起作用）。

.right .grouped-dots {
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    background-color: #F5F5F5;
    display: flex; /* NEW */
    flex-direction: column;
    justify-content: center;
}

DEMO

如何拉伸 flexbox 的元素？

How to stretch an element of a flexbox?

html

css

flexbox