[英]How to evenly distribute width between flexbox children with nested flexboxes?
我正在為正在構建的網站使用一些CSS3。 我正在嘗試制作一個使用flexbox使其所有子級具有相等寬度的“容器”類。 這可以正常工作,但是當我在另一個“容器”中放置一個“容器”和一個普通元素時,兩個子元素的寬度不相等。
我不確定為什么它不起作用,因為它適用於不是容器的任何元素。
HTML:
<div class="container">
<div class="container">
<div class="content-box">
One Sixth
</div>
<div class="content-box">
One Sixth
</div>
<div class="content-box">
One Sixth
</div>
</div>
<div class="content-box">
One half
</div>
</div>
CSS:
.container {
display: flex;
align-items: flex-start;
}
.container > * {
flex-basis: 100%;
min-width: 0;
}
.container > :not(:first-child) {
margin-left: 2%;
}
Codepen示例: https ://codepen.io/NetworkOverflow/pen/XLbdqa
問題是,當您將容器放入容器中時,它會增加邊距,因此您會在右側看到兩倍的空間。
我將您的容器設置為justify-content: space-between;
將內容元素推到外部邊緣。 我使用flex:1
而不是flex-basis
來告訴瀏覽器,每個元素應該占用相同的空間。
您的CSS變為:
.container {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.container > * {
flex: 1;
margin-left: 2%;
min-width: 0;
}
.container > *:first-child {
margin-left:0;
}
/* not needed
.container > :not(:first-child) {
margin-left: 2%;
}
*/
根據用法,有時會添加“大小調整”類,這些類根據項目的數量來強制使用flex-basis
。 這是一個codepen示例。
.third {
flex-basis: calc(33.3333% - 2%);
}
.half {
flex-basis: calc(33.3333% - 2%);
}
您需要為將所有元素設置為flex-basis: 100%
付出代價flex-basis: 100%
。
因為您要告訴所有元素(無論它們具有多少同級元素)要占用容器的整個寬度,所以您要強制flex-shrink
計算容納所有元素所需的空間。
這涉及到一個相對復雜的flexbox算法,當您考慮填充和box-sizing: border-box
時,該算法會變得更加復雜box-sizing: border-box
,這兩種代碼都存在於代碼中。
該算法的解釋如下: padding和border-box中的flex-shrink系數如何?
最快,最簡單的解決方案是指定容器的實際寬度。
對於說明問題的行(帶有容器以及容器內的容器),與其將其設置為flex-basis: 100%
,這會觸發flex-shrink
,而是將它們設置為flex-basis: 50%
。 現在,避免了flex-shrink
過程,您將獲得所需的東西。
我將此添加到您的代碼中:
.container > .demo50 {
flex-basis: 50%;
}
div.content { float: left; width: 100%; height: 100%; background-color: var(--background-color2); padding: 2% 10%; } div.banner { background-color: var(--scheme-color2); box-shadow: 0px 0px 50px 10px rgba(23, 196, 167, 0.5); padding: 1rem; text-align: center; margin-bottom: 2em; } .content-box { background-color: var(--background-color1); box-shadow: 0px 0px 10px 5px rgba(84, 84, 84, 1); padding: 1rem; overflow-wrap: break-word; margin-bottom: 2em; } .container { display: flex; align-items: flex-start; } .container > * { flex-basis: 100%; min-width: 0; } .container > :not(:first-child) { margin-left: 2%; } .two-thirds { flex-basis: calc(100% / 3 * 2); } .container > .demo50 { flex-basis: 50%; } * { margin: 0; padding: 0; box-sizing: border-box; } :root { --background-color1: #707070; --background-color2: #424242; --background-color3: #afafaf; --scheme-color1: #20f9d5; --scheme-color2: #17c4a7; --scheme-color3: #89e5d6; --text-color: #e3edeb; } body { font-family: "Open Sans", sans-serif; color: var(--text-color); }
<div class="content"> <div class="container"> <div class="banner"> <h1>Example</h1> </div> </div> <div class="container"> <div class="content-box"> <p>Using 'flex-basis: 100%' seems to work perfectly well for evenly sizing and spacing elements in a row. However, when you put a .container inside a .container and attempt to do something like you see two rows below, the .container element and the element that follows do not space themselves at half and half width.</p> </div> </div> <div class="container"> <div class="content-box"> One Half </div> <div class="content-box"> One Half </div> </div> <div class="container"> <div class="container demo50"> <div class="content-box"> One Sixth </div> <div class="content-box"> One Sixth </div> <div class="content-box"> One Sixth </div> </div> <div class="content-box demo50"> One half </div> </div> <div class="container"> <div class="content-box"> One Third </div> <div class="content-box"> Two Thirds </div> <div class="content-box"> Three Thirds </div> </div> <div class="container"> <div class="content-box two-thirds"> Two Thirds </div> <div class="content-box"> One Third </div> </div> <div class="container"> <div class="content-box"> One Third </div> <div class="content-box two-thirds"> Two Thirds </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.