CSS Flexbox：使所有项目相同尺寸，无需裁剪

我有一个包含各种项目的Flex-Box容器。我希望所有项目具有相同的宽度，但我也想避免裁剪。CSS Flexbox：使所有项目相同尺寸，无需裁剪

我的HTML结构去有点像这样（用刀片编译）：

<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每个项目，但最终这样看：

项目的最后一行不共享相同的宽度，并在兰斯的项目出现局部裁剪。

希望我已经明确了我究竟想要什么。我不介意在CSS中指定宽度，如果它只有最小宽度，则为。

这就是我对Code Pen。随意玩这个。

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

来源

2015-12-21 Boom

Flexbox，就不能这样做......你** **你需要使用Javascript。 –

@Paulie_D，谢谢澄清。我删除了我的答案。 –

@Boom，我认为你的问题可以简单地简单地说：*所有的弹性项目必须是相等的宽度。内容最长的弹性项目设置长度。* –

目前，这是Flexbox无法实现的。

然而，CSS工作组已经意识到了这个问题，并希望解决它在Flexbox的2级

见Specification Issues and Planning » css-flexbox-2

解决在最后一行的“项目获得太大了当你弯曲“ 的问题。更一般地说，“使物品具有一致的灵活尺寸，不管每条线上有多少额外空间”。

可能的解决方案 - 用最后一个项目的“幻影副本”填写最后一行，然后将它们弹入，然后删除它们。

可能的解决方案 - 计算整个flexbox（而不是每行）的1fr和对齐自由空间的最小值，并使用。

来源

2015-12-24 15:43:05 Oriol

诀窍是在列表均匀地划分空间（如在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">[email protected]</span> 
 
    </div> 
 
    </section> 
 
    <section class="tease tease-user"> 
 
    <div class="summary"> 
 
     <h3 class="name">Lance Armstrong</h3> 
 
     <span class="email">[email protected]</span> 
 
    </div> 
 
    </section> 
 
    <section class="tease tease-user"> 
 
    <div class="summary"> 
 
     <h3 class="name">Jackie Chan</h3> 
 
     <span class="email">[email protected]</span> 
 
    </div> 
 
    </section> 
 
    <section class="tease tease-user"> 
 
    <div class="summary"> 
 
     <h3 class="name">James Bond</h3> 
 
     <span class="email">[email protected]</span> 
 
    </div> 
 
    </section> 
 
    <section class="tease tease-user"> 
 
    <div class="summary"> 
 
     <h3 class="name">Issac Newton</h3> 
 
     <span class="email">[email protected]</span> 
 
    </div> 
 
    </section> 
 
    <section class="tease tease-user"> 
 
    <div class="summary"> 
 
     <h3 class="name">Pope Francis</h3> 
 
     <span class="email">[email protected]</span> 
 
    </div> 
 
    </section> 
 
    <section class="tease tease-user"> 
 
    <div class="summary"> 
 
     <h3 class="name">Issac Newton</h3> 
 
     <span class="email">[email protected]</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>

来源

2015-12-24 16:27:07 0b10011

CSS Flexbox：使所有项目相同尺寸，无需裁剪

回答

相关问题