我怎样才能停止<li>
拉伸(stretch)元素以填充其 flex 容器的高度?我只想拉伸(stretch)背景,让元素位于框的顶部。
我知道通常你会使用 align-items: flex-start
, 但这不能作为父项工作 div
绝对定位。
我需要为与此问题无关的部分布局保留绝对定位。
div {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
ul {
align-items: flex-start;
background: gold;
display: flex;
flex-wrap: wrap;
flex-grow: 1;
}
li {
flex-basis: 50%;
}
<div>
<h1>hello</h1>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
最佳答案
将 align-content: flex-start
添加到 ul
(在换行时对齐flex line一个 flexbox,你应该使用 align-content
属性)——看下面的演示:
div {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
ul {
align-items: flex-start;
background: gold;
display: flex;
flex-wrap: wrap;
flex-grow: 1;
align-content: flex-start; /* added */
}
li {
flex-basis: 50%;
}
<div>
<h1>hello</h1>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
关于html - 让 flex child 不拉伸(stretch)(但在绝对 parent 里面)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55279159/