如何将列与flexbox对齐? [英] How to align columns with flexbox?
问题描述
我目前正在学习Flexbox布局,但找不到解决我问题的方法.
I am currently learning Flexbox Layout and I can not find a solution to my problem.
我尝试使用justify-content和flex-basis,但是它不起作用.有人有解决方案吗?
I tried with justify-content and flex-basis but it does not work. Does anyone have the solution ?
我想要的结果:
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>
https://jsfiddle.net/qdsbacvn/
推荐答案
这是CSS网格的理想用例,不需要大量复杂的代码:
This is a perfect use case for CSS grid where you don't need a lot of complex code:
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,您可以尝试以下操作:
With flexbox you can try the following:
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
中添加在第一种情况下不存在的边距/填充.
Since your are using flex-basis:0
only padding/margin are considered before calculating the free space. The trick is to make sure we have the same free space in both situation thus we add to flex-basis
of the big element the margin/padding that aren't present in the first case.
这篇关于如何将列与flexbox对齐?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!