我有一個(gè)啟用了 flex-wrap 的 4 列 Flex-box 布局：當(dāng)我調(diào)整頁(yè)面大小并且頁(yè)面邊緣接觸<h1>標(biāo)題時(shí)，藍(lán)色列正確地向下包裹：我現(xiàn)在想做的是在一個(gè) div 中添加 25 個(gè)相鄰的圖像，該 div 在 x 上溢出，彈出滾動(dòng)條，但不會(huì)向下包裹藍(lán)色列，除非其他內(nèi)容變得太小因此，滾動(dòng)條正確出現(xiàn)，但一旦出現(xiàn)，藍(lán)色列就會(huì)嘗試展開(kāi)并向下滾動(dòng)。我希望圖像卷軸始終小于藍(lán)色列，但即使我將其設(shè)置為 50% 寬度，它仍然會(huì)擴(kuò)展藍(lán)色列，然后進(jìn)行換行。有沒(méi)有辦法只在內(nèi)容小于標(biāo)簽時(shí)使藍(lán)色柱換行<h1>并完全忽略圖像卷軸？我為其制作了一個(gè)codepen 片段，并在下面添加了示例代碼：* { box-sizing: border-box;}body { margin: 0; padding: 0; color: white;}.green { background-color: green;}.red { background-color: red;}.blue { background-color: blue;}.black { background-color: black;}.display\:flex { display: flex;}.flex-direction\:column { flex-direction: column;}.flex-direction\:row { flex-direction: row;}.flex-wrap\:wrap { flex-wrap: wrap;}.flex-grow\:100 { flex-grow: 100;}.flex-grow\:2 { flex-grow: 2;}.flex-grow\:1 { flex-grow: 1;}.flex-grow\:0 { flex-grow: 0;}.flex-shrink\:1 { flex-shrink: 1;}.height\:100vh { height: 100vh;}.reel { display: flex; overflow-x: auto;}.reel>img { height: auto; max-width: 25%;}.reel>*+* { margin-left: 10px;}
1 回答
叮當(dāng)貓咪
TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個(gè)贊
1）設(shè)置.reel>img { flex-shrink: 0 }將在圖像下方顯示滾動(dòng)條
2）當(dāng)您不使用flex-grow與同級(jí)元素相比的相對(duì)增長(zhǎng)，而只是設(shè)置.red,.green,.blue { flex-grow: 1 }并使用flex-basis: xx%每種顏色時(shí)，就會(huì)發(fā)生換行。
不知何故，瀏覽器需要一個(gè)寬度來(lái)工作。請(qǐng)參閱/* ADDED CODE */CSS...
更新
OP詢問(wèn)：
有沒(méi)有辦法防止黑色、紅色和綠色列占用超出其需要的空間，從而使藍(lán)色列吃掉所有可用空間？
.blue這可以通過(guò)將除flex-grow: 0; flex-basis: auto(flexbox 默認(rèn)值) 以外的所有設(shè)置以 和 的.blue flexbasis百分比 > 0% 且 < 100%（更準(zhǔn)確地說(shuō)：小于 100% 減去.black,.red和 的總寬度.green）來(lái)實(shí)現(xiàn)。設(shè)置.blue { flex-basis: auto }將不起作用，因?yàn)樗鼤?huì)立即換行，因?yàn)樗?code>flex-grow: 1.
更新了代碼以反映上述內(nèi)容（OVERRIDE 1）并添加了 OP 最終使用的最終值（OVERRIDE 2）。
只需嘗試看看什么對(duì)您有用......
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
color: white;
}
/* ADDED CODE (original answer) */
.black { flex-basis: 5% } /* example values */
.red { flex-basis: 15% }
.green { flex-basis: 30% }
.blue { flex-basis: 50% } /* [MUST] add up to 100% */
.reel > img {
flex-shrink: 0;
}
/* OVERRIDE 1: ADDED CODE, as per OP remarks (UPDATE) */
.black { flex-basis: auto }
.red { flex-basis: auto }
.green { flex-basis: auto }
.blue { flex-basis: 25% }
/* OVERRIDE 2: OP final choice */
.black { flex-basis: 50px }
.red { flex-basis: 100px }
.green { flex-basis: 100px }
.blue { flex-basis: 25% }
/**/
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.black {
background-color: black;
}
.display\:flex {
display: flex;
}
.flex-direction\:column {
flex-direction: column;
}
.flex-direction\:row {
flex-direction: row;
}
.flex-wrap\:wrap {
flex-wrap: wrap;
}
.flex-grow\:100 {
flex-grow: 100;
}
.flex-grow\:2 {
flex-grow: 2;
}
.flex-grow\:1 {
flex-grow: 1;
}
.flex-grow\:0 {
flex-grow: 0;
}
.flex-shrink\:1 {
flex-shrink: 1;
}
.height\:100vh {
height: 100vh;
}
.reel {
display: flex;
overflow-x: auto;
}
.reel > img {
height: auto;
max-width: 25%;
}
.reel > * + * {
margin-left: 10px;
}
<body class="width:100%">
<div class="display:flex flex-direction:row flex-wrap:wrap height:100vh">
<div class="black flex-grow:0">
Column1
</div>
<div class="red flex-grow:1">
Column2
<br />
<input>
<br />
<input>
</div>
<div class="green flex-grow:1">
Column3
<br />
<input>
<br />
<input>
</div>
<div class="blue flex-grow:1">
<h1>
This is some long header text in Column4
</h1>
<div class="reel">
<img src="https://i.imgur.com/M7LUTq5.jpg">
<img src="https://i.imgur.com/M7LUTq5.jpg">
<img src="https://i.imgur.com/M7LUTq5.jpg">
<img src="https://i.imgur.com/M7LUTq5.jpg">
<img src="https://i.imgur.com/M7LUTq5.jpg">
<img src="https://i.imgur.com/M7LUTq5.jpg">
<img src="https://i.imgur.com/M7LUTq5.jpg">
<img src="https://i.imgur.com/M7LUTq5.jpg">
<img src="https://i.imgur.com/M7LUTq5.jpg">
<img src="https://i.imgur.com/M7LUTq5.jpg">
<img src="https://i.imgur.com/M7LUTq5.jpg">
<img src="https://i.imgur.com/M7LUTq5.jpg">
<img src="https://i.imgur.com/M7LUTq5.jpg">
<img src="https://i.imgur.com/M7LUTq5.jpg">
<img src="https://i.imgur.com/M7LUTq5.jpg">
</div>
</div>
</div>
</body>
- 1 回答
- 0 關(guān)注
- 136 瀏覽
添加回答
舉報(bào)
0/150
提交
取消