CSS Flexbox：使所有项目相同大小而不剪裁 [英] CSS Flexbox: Make All Items same Size without Clipping
问题描述
我有一个包含各种项目的Flex-Box容器。
我的HTML结构有点像这样（编译与刀片）：
< div class =container-tease>
@foreach（$ users as $ user）
< section class =tease tease-user>
< img class =avatarsrc ={{$ 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;
}
}
}
}
}
$ b b
查看时，显示如下：
当然，这不是我想要的。
我想这些项目都具有相同的宽度， p>
现在想起我不是要求一个两列解决方案，也不是一个基于浏览器的响应解决方案。
例如，如果我从示例中删除了长名称/电子邮件，那么这个宽度的决定因素是项目本身，而不是浏览器的宽度。应如下所示：
尝试对每个项目执行 flex：1 0 200px ，但最终看起来像这样：
a href =https://i.stack.imgur.com/wRQzM.png =nofollow noreferrer>
最后一行的项目不具有相同的宽度，部分剪辑出现在Lance的项目上。
希望我已经清楚了我究竟想要什么。我不介意必须在CSS中指定宽度，如果只有最小宽度。
这里是我有的< a href =http://codepen.io/anon/pen/JGKJRm?editors=110 =nofollow noreferrer>代码笔。
我想坚持一个CSS解决方案，但如果我想要的话，我会接受一个JavaScript解决方案。 / p>
诀窍是在列表末尾添加足够的空元素以均匀分配空间（如 http://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>成龙< / 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>教皇弗朗西斯< / 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>
I have a Flex-Box Container that contains various items. I want all items to have the same width, but I also want to avoid clipping.
My HTML Structure goes a bit like this (Compiled with 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>
With the following CSS (Compiled with 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;
}
}
}
}
}
When viewed, it appears like this:
Of course, this isn't what I want.
I'd like these items to all share the same width, like this:
Now bare in mind that I'm not asking for a two-column solution, nor a browser-based responsive solution. The deciding factor for the width here are the items themselves, not how wide the browser is.
For example, if I remove the long names/emails from the example, it should look like this:
I've tried doing things like flex: 1 0 200px for each item, but that ends up looking like this:
The last row of items don't share the same width, and partial clipping occurs on Lance's item.
Hopefully I've made clear of what exactly I want. I don't mind having to specify a width in the CSS, if it is only a minimum width.
Here's what I have on Code Pen. Feel free to play around with that.
I'd like to stick to a CSS solution, but I'll accept a JavaScript solution if it does what I want.
The trick is to add enough empty elements at the end of the list to evenly divide the space (as mentioned in http://stackoverflow.com/a/22018710/526741). Any rows with no content (eg, only empty .tease .tease-user elements) would be collapsed.
flex:1 0 200px ensures that each element is at least 200 pixels wide, but can grow, if there's room. It also keeps all of the boxes the same width.
overflow:hidden is the only way I can think of right now that prevents a single box from growing when the other boxes don't. You can use some clever text wrapping to make sure everything is still readable. Or remove this and deal with the occasional row with boxes of different sizes (only when the contents are too long for the box).
.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：使所有项目相同大小而不剪裁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
