CSS Flexbox：使所有項目的大小相同而不剪切

Question

我有一個包含各種物品的Flex-Box容器。 我希望所有項目具有相同的寬度，但我也想避免剪裁。

我的HTML結構有點像這樣（用Blade編譯）：

<div class="container-tease">
    @foreach($users as $user)
        <section class="tease tease-user">
            <img class="avatar" src="{{ $user->avatar }}">
            <div class="summary">
                <h3 class="name">{{ $user->name }}</h3>
                <span class="email">{{ $user->email }}</span>
            </div>
        </section>
    @endforeach
</div>

使用以下CSS（使用SASS編譯）：

.container-tease
{
    font-family: 'Source Sans Pro', sans-serif;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;

    .tease
    {
        margin: 10px;
        padding: 7px;

        &.tease-user
        {
            display: flex;
            align-items: center;

            background-color: #EEE;
            border: 1px solid #AAA;
            border-radius: 8px;

            .avatar
            {
                border-radius: 24px;
                background-color: white;
                width: 48px; height: 48px;
            }

            .summary
            {
                margin-left: 10px;
                margin-right: 5px;

                .name
                {
                    margin: 0 0 5px 0;
                    font-size: 20px;
                    line-height: 20px;
                    white-space: nowrap;
                }

                .email
                {
                    margin-left: 2px;
                    font-size: 14px;
                    line-height: 14px;
                    color: #888;
                }
            }
        }
    }
}

查看時，它看起來像這樣：

當然，這不是我想要的。

我希望這些項目共享相同的寬度，如下所示：

現在請記住，我不是要求兩列解決方案，也不是基於瀏覽器的響應式解決方案。 這里寬度的決定因素是項目本身，而不是瀏覽器的寬度。

例如，如果我從示例中刪除長名稱/電子郵件，它應如下所示：

我嘗試過像flex: 1 0 200px這樣的東西flex: 1 0 200px每個項目flex: 1 0 200px ，但最終看起來像這樣：

最后一行的項目不共享相同的寬度，並且在Lance的項目上發生部分剪切。

希望我已經明確了我想要的東西。 我不介意在CSS中指定寬度， 如果它只是最小寬度 。

這是我在Code Pen上的內容 。 隨意玩弄它。

我想堅持使用CSS解決方案，但如果它符合我的要求，我會接受JavaScript解決方案。

Answer 1

目前，Flexbox無法實現這一點。

但是，CSS工作組知道這個問題，並希望在Flexbox Level 2中修復它。

請參閱規范問題和規划»css-flexbox-2

解決“當你彎曲時，最后一行的物品太大了”的問題。 更一般地說，“無論每條線上有多少額外空間，都可以使物品具有一致的彎曲尺寸”。

• 可能的解決方案 - 用最后一項的“幻影副本”填寫最后一行，將它們展開，然后將它們刪除。
• 可能的解決方案 - 計算整個flexbox（而不是每行）的最小值1fr和對齊空閑空間並使用它。

Answer 2

訣竅是在列表末尾添加足夠的空元素以均勻划分空間（如https://stackoverflow.com/a/22018710/526741中所述 ）。 任何沒有內容的行（例如，只有空的.tease .tease-user元素）都將被折疊。

flex:1 0 200px確保每個元素的寬度至少為200像素，但如果有空間則可以增長。 它還保持所有盒子的寬度相同。

overflow:hidden是我現在能夠想到的唯一方法，當其他盒子沒有時，它會阻止單個盒子生長。 您可以使用一些聰明的文本包裝來確保所有內容仍然可讀。 或者刪除它並處理帶有不同大小的盒子的偶爾行（僅當盒子的內容太長時）。

 .container-tease { display:flex; flex-wrap:wrap; } .tease-user { flex:1 0 200px; overflow:hidden; outline:1px solid orange; } 

 <div class="container-tease"> <section class="tease tease-user"> <div class="summary"> <h3 class="name">Bill Murray</h3> <span class="email">murray.bill@att.net</span> </div> </section> <section class="tease tease-user"> <div class="summary"> <h3 class="name">Lance Armstrong</h3> <span class="email">lance.armstrong@gmail.com</span> </div> </section> <section class="tease tease-user"> <div class="summary"> <h3 class="name">Jackie Chan</h3> <span class="email">chan@gmail.com</span> </div> </section> <section class="tease tease-user"> <div class="summary"> <h3 class="name">James Bond</h3> <span class="email">bond.007@misix.gov</span> </div> </section> <section class="tease tease-user"> <div class="summary"> <h3 class="name">Issac Newton</h3> <span class="email">inewton@cambridge.edu</span> </div> </section> <section class="tease tease-user"> <div class="summary"> <h3 class="name">Pope Francis</h3> <span class="email">theoneandonly@bible.org</span> </div> </section> <section class="tease tease-user"> <div class="summary"> <h3 class="name">Issac Newton</h3> <span class="email">inewton@cambridge.edu</span> </div> </section> <section class="tease tease-user"></section> <section class="tease tease-user"></section> <section class="tease tease-user"></section> <section class="tease tease-user"></section> <section class="tease tease-user"></section> </div>