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等操作，但最终看起来像这样：

最后一行项目的宽度不同，Lance项目会发生部分剪辑。

希望我已经明确了我想要的东西。我不介意在CSS中指定宽度，如果它只是最小宽度。

这是Code Pen上的内容。随意玩弄它。

我想坚持使用CSS解决方案，但如果它符合我的要求，我会接受JavaScript解决方案。

Answer 1

目前，Flexbox无法实现这一目标。

然而，CSS工作组已意识到此问题，并希望在Flexbox Level 2中修复它。

请参阅Specification Issues and Planning » 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>

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

2 个答案: