Flexbox可以处理不同大小的列，但行高一致吗？ [英] Can flexbox handle varying sizes of columns but consistent row height?
问题描述
我只是在学习flexbox是如何工作的，并且想要构建一个非常粗糙的原型来查看flexbox是否可以处理这种布局。
我基本上想看看flexbox是否可以支持具有不同宽度和高度的4列表格，但具有一致的行高度。
我不确定我是否很好地解释了布局，因此以下是我所追求的内容：
所以我所关心的是：如果我使用HTML表格进行此操作，不管特定列的高度如何，每一行都是一致的。
我基本上想知道flexbox是否可以支持带有
不同宽度和高度，但具有一致行高的4列表格。
简而言之，Flexbox与HTML Table共享的一个很好的特性是，同一行上的flex项可以具有相同的高度，这由 值得一提的是Flexbox 不与HTML Table共享。 align-items prope RTY 。它的默认值是 stretch ，并且由此使得一行上的项目等于高。
.flex-container {display：flex; flex-wrap：wrap; / *允许项目打包* / justify-content：space-between; / * vertical * / align-items：stretch; / * horizontal，是默认值，可以省略* /}。flex-item {flex-basis：23％; / *给每个项目一个宽度* / background-color：#ccc;填充：10px; box-sizing：border-box;} flex-item：nth-child（n + 5）{margin-top：10px; / * from 5th item，add top margin * /} < div class =flex-container> < div class =flex-item> Left< br> high< / div> < div class =flex-item>中/左< / div> < div class =flex-item>中/右< / div> < div class =flex-item>右< / div> < div class =flex-item> Left< / div> < div class =flex-item>中/左< / div> < div class =flex-item>中/右< / div> < div class =flex-item>右< / div> < div class =flex-item> Left< / div> < div class =flex-item>中/左< / div> < div class =flex-item>中/右< br>更高< br>更高< / div> < div class =flex-item> Right< / div>< / div>
$ b
如果项目的内容将比其他项目的宽度更宽，其他项目不会将宽度调整为最宽。
.flex-container {display：flex; flex-wrap：wrap; / *允许项目打包* / justify-content：space-between; / * vertical * / align-items：stretch; / * horizontal，是默认值，可以省略* /}。flex-item {flex-basis：23％; / *给每个项目一个宽度* / background-color：#ccc;填充：10px; box-sizing：border-box;} flex-item：nth-child（n + 5）{margin-top：10px; / * from 5th item，add top margin * /}
< div class =flex-container> < div class =flex-item> Left<> high< / div>< div class =flex-item> Middle / Left& nbsp;& nbsp;& nbsp;& NBSP;更宽< / DIV> < div class =flex-item>中/右< / div> < div class =flex-item>右< / div> < div class =flex-item> Left< / div> < div class =flex-item>中/左< / div> < div class =flex-item>中/右< / div> < div class =flex-item>右< / div> < div class =flex-item> Left< / div> < div class =flex-item>中/左< / div> < div class =flex-item>中/右< br>更高< br>更高< / div> < div class =flex-item> Right< / div>< / div>
$ b
通过防止flex项缩小，并且使它们小于它们的内容，可以强制等宽。
<注意， overflow：hidden （或者 visible 以外的任何值）与<$ c $具有相同的效果c> min-width：0 有，所以在下面的示例 min-width 中可以省略。
.flex-container {display：flex; flex-wrap：wrap; / *允许项目打包* / justify-content：space-between; / * vertical * / align-items：stretch; / * horizontal，是默认值，可以省略* /}。flex-item {flex-basis：23％; / *给每个项目一个宽度* / background-color：#ccc;填充：10px;盒子尺寸：边框; flex-shrink：0; / *防止缩小到适合* / min-width：0; / *允许缩小内容宽度* / overflow：隐藏; / *隐藏溢出的内容* /}。flex-item：nth-child（n + 5）{margin-top：10px; / * from 5th item，add top margin * /}
< div class =flex-container> < div class =flex-item> Left<> high< / div>< div class =flex-item> Middle / Left& nbsp;& nbsp;& nbsp;& NBSP;更宽< / DIV> < div class =flex-item>中/右< / div> < div class =flex-item>右< / div> < div class =flex-item> Left< / div> < div class =flex-item>中/左< / div> < div class =flex-item>中/右< / div> < div class =flex-item>右< / div> < div class =flex-item> Left< / div> < div class =flex-item>中/左< / div> < div class =flex-item>中/右< br>更高< br>更高< / div> < div class =flex-item> Right< / div>< / div>
$ b
更适合的比较是使用CSS Grid，它可以完成HTML Table所能做的所有事情，然后是一些：）
以下是Flexbox和CSS Grid的两大指南：
I am just learning how flexbox works and want to build a very rough prototype to see if flexbox can handle this layout.
I basically want to see if flexbox can support a 4-column table with varying width and height, but with consistent row height.
I'm not sure I am explaining the layout so well, so here is a quick sketch of what I am after:
So what I am concerned with is this: If I was making this using HTML tables, regardless of how much height a particular column has, each row will be consistent.
I basically want to see if flexbox can support a 4-column table with varying width and height, but with consistent row height.
Simply put, one good feature Flexbox share with HTML Table, is that flex item's on the same row can have the same height, which is controlled by the align-items property. Its default value is stretch, and will by that make items on a row equal high.
.flex-container {
display: flex;
flex-wrap: wrap; /* allow items to wrap */
justify-content: space-between; /* vertical */
align-items: stretch; /* horizontal, is default
and can be omitted */
}
.flex-item {
flex-basis: 23%; /* give each item a width */
background-color: #ccc;
padding: 10px;
box-sizing: border-box;
}
.flex-item:nth-child(n+5) {
margin-top: 10px; /* from 5th item, add top margin */
}
<div class="flex-container">
<div class="flex-item">Left<br>high</div>
<div class="flex-item">Middle/Left</div>
<div class="flex-item">Middle/Right</div>
<div class="flex-item">Right</div>
<div class="flex-item">Left</div>
<div class="flex-item">Middle/Left</div>
<div class="flex-item">Middle/Right</div>
<div class="flex-item">Right</div>
<div class="flex-item">Left</div>
<div class="flex-item">Middle/Left</div>
<div class="flex-item">Middle/Right<br>higher<br>higher</div>
<div class="flex-item">Right</div>
</div>
One thing that might be worth mentioned, is what Flexbox doesn't share with HTML Table.
- Dynamic equal column width.
If an item's content will be wider than the rest of the items in the same column, the other items won't adjust their width to equal the widest.
.flex-container {
display: flex;
flex-wrap: wrap; /* allow items to wrap */
justify-content: space-between; /* vertical */
align-items: stretch; /* horizontal, is default
and can be omitted */
}
.flex-item {
flex-basis: 23%; /* give each item a width */
background-color: #ccc;
padding: 10px;
box-sizing: border-box;
}
.flex-item:nth-child(n+5) {
margin-top: 10px; /* from 5th item, add top margin */
}
<div class="flex-container">
<div class="flex-item">Left<br>high</div>
<div class="flex-item">Middle/Left - is wider</div>
<div class="flex-item">Middle/Right</div>
<div class="flex-item">Right</div>
<div class="flex-item">Left</div>
<div class="flex-item">Middle/Left</div>
<div class="flex-item">Middle/Right</div>
<div class="flex-item">Right</div>
<div class="flex-item">Left</div>
<div class="flex-item">Middle/Left</div>
<div class="flex-item">Middle/Right<br>higher<br>higher</div>
<div class="flex-item">Right</div>
</div>
By prevent flex item's to shrink, and enable them to be smaller than their content, it is possible to force equal width.
Note, overflow: hidden (or any value other than visible) has the same effect as min-width: 0 has, so in below sample min-width can be omitted.
.flex-container {
display: flex;
flex-wrap: wrap; /* allow items to wrap */
justify-content: space-between; /* vertical */
align-items: stretch; /* horizontal, is default
and can be omitted */
}
.flex-item {
flex-basis: 23%; /* give each item a width */
background-color: #ccc;
padding: 10px;
box-sizing: border-box;
flex-shrink: 0; /* prevent from "shrink to fit" */
min-width: 0; /* allow to shrink past content width */
overflow: hidden; /* hide overflowed content */
}
.flex-item:nth-child(n+5) {
margin-top: 10px; /* from 5th item, add top margin */
}
<div class="flex-container">
<div class="flex-item">Left<br>high</div>
<div class="flex-item">Middle/Left - is wider</div>
<div class="flex-item">Middle/Right</div>
<div class="flex-item">Right</div>
<div class="flex-item">Left</div>
<div class="flex-item">Middle/Left</div>
<div class="flex-item">Middle/Right</div>
<div class="flex-item">Right</div>
<div class="flex-item">Left</div>
<div class="flex-item">Middle/Left</div>
<div class="flex-item">Middle/Right<br>higher<br>higher</div>
<div class="flex-item">Right</div>
</div>
A more appropriate comparison would be with CSS Grid, which can do pretty much everything HTML Table can, and then some :)
Here is two great guides to Flexbox and CSS Grid:
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://css-tricks.com/snippets/css/complete-guide-grid/
这篇关于Flexbox可以处理不同大小的列，但行高一致吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
