我正在学习flexbox的工作方式,并希望构建一个非常粗略的原型,看看flexbox是否可以处理这种布局。
我基本上想看看flexbox是否可以支持宽度和高度不同的4列表,但行高一致。
我不确定我是否正在如此好地解释布局,所以这里是我所追求的快速草图:
所以我关心的是:如果我使用HTML表格进行此操作,无论特定列的高度是多少,每一行都将保持一致。
答案 0 :(得分:4)
我基本上想看看flexbox是否可以支持4列表 不同的宽度和高度,但行高一致。
简单地说,Flexbox与HTML表共享的一个很好的功能是,同一行 上的弹性项具有相同的高度,由align-items
property控制。它的默认值是stretch
,并且会使行中的项目等于高。
.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>
&#13;
可能值得一提的是,Flexbox 与HTML Table无法共享。
如果某个项目的内容比同一列中的其他项目更宽,则其他项目不会将其宽度调整为等于最宽的。
.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 */
}
&#13;
<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>
&#13;
通过防止弹性项目缩小,并使它们小于其内容,可以强制相等的宽度。
注意,overflow: hidden
(或visible
以外的任何值)与min-width: 0
具有相同的效果,因此在下面的示例min-width
中可以省略。
.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 */
}
&#13;
<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>
&#13;
更合适的比较是使用CSS Grid,它几乎可以完成HTML Table的所有功能,然后是一些:)
以下是Flexbox和CSS Grid的两个很棒的指南:
答案 1 :(得分:2)
一致的行高实际上是flexbox中的默认设置。
您无法获得equal height rows in a flex container,这意味着所有行共享相同的高度。为此,您可以使用CSS Grid layout。
但是对于flexbox,每行本身在所有列上的高度都相同。
body {
display: flex;
justify-content: center;
}
.container {
display: flex;
flex-wrap: wrap;
width: 75%;
}
.box {
flex: 1 0 20%; /* see note below */
margin: 0 5px 5px 0;
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}
&#13;
<div class="container">
<div class="box">GROUP 1</div>
<div class="box">text text text text text text text text text text text text text text text text</div>
<div class="box"></div>
<div class="box"></div>
<div class="box">GROUP 2</div>
<div class="box"></div>
<div class="box">text text text text text text text text</div>
<div class="box"></div>
<div class="box">GROUP 3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box">text text text text text text text texttext text text text text text text text</div>
<div class="box">GROUP 4</div>
<div class="box">text text text text text text text text</div>
<div class="box"></div>
<div class="box"></div>
</div>
&#13;
关于flex: 1 0 20%
,这里是基本概念:
Flex容器设置为wrap
。
在flex-grow: 1
简写中定义flex
的展示项目中,flex-basis
不需要25%,这实际上会导致由于边距,每行有三个项目。
由于flex-grow
将消耗行上的可用空间,flex-basis
只需要足够大以强制执行换行。在这种情况下,使用flex-basis: 20%
时,边距有足够的空间,但第五项的空间不足。
更多信息: