我目前正在学习 Flexbox 布局,但找不到解决问题的方法。
我尝试使用 justify-content 和 flex-basis,但它不起作用。有没有人有解决办法?
我想要的结果:
section {
display: flex;
margin: 0 auto;
justify-content: space-between;
}
.column {
width: 100%;
background-color: #e2e2e2;
padding: 1%;
margin: 1%;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
#first {
flex-grow: 2;
flex-shrink: 2;
flex-basis: 0;
}
<section>
<div class="column" id="first">First</div>
<div class="column" id="second">Second</div>
<div class="column">Third</div>
</section>
<section>
<div class="column">First</div>
<div class="column">Second</div>
<div class="column">Third</div>
<div class="column">Fourth</div>
</section>
最佳答案
这是 CSS 网格的完美用例,您不需要大量复杂的代码:
section {
display: grid;
margin: 2% auto;
grid-gap:2%;
grid-template-columns:repeat(4,1fr);
}
.column {
background-color: #e2e2e2;
padding: 5px;
}
#first {
grid-column:span 2;
}
<section>
<div class="column" id="first">First</div>
<div class="column" id="second">Second</div>
<div class="column">Third</div>
</section>
<section>
<div class="column">First</div>
<div class="column">Second</div>
<div class="column">Third</div>
<div class="column">Fourth</div>
</section>
使用 flexbox 你可以尝试以下方法:
section {
display: flex;
}
.column {
background-color: #e2e2e2;
padding: 1%;
margin: 1%;
flex-grow: 1;
flex-basis: 0;
}
#first {
flex-grow: 2;
flex-basis:4%; /*2 x (padding + margin)*/
}
<section>
<div class="column" id="first">First</div>
<div class="column" id="second">Second</div>
<div class="column">Third</div>
</section>
<section>
<div class="column">First</div>
<div class="column">Second</div>
<div class="column">Third</div>
<div class="column">Fourth</div>
</section>
由于您使用的是 flex-basis:0
,因此在计算可用空间之前只考虑填充/边距。诀窍是确保我们在两种情况下都有相同的可用空间,因此我们向大元素的 flex-basis
添加第一种情况下不存在的边距/填充。
关于css - 如何将列与 flexbox 对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55543039/