我有一个启用了 flex-wrap 的 4 列 Flex-box 布局：当我调整页面大小并且页面边缘接触<h1>标题时，蓝色列正确地向下包裹：我现在想做的是在一个 div 中添加 25 个相邻的图像，该 div 在 x 上溢出，弹出滚动条，但不会向下包裹蓝色列，除非其他内容变得太小因此，滚动条正确出现，但一旦出现，蓝色列就会尝试展开并向下滚动。我希望图像卷轴始终小于蓝色列，但即使我将其设置为 50% 宽度，它仍然会扩展蓝色列，然后进行换行。有没有办法只在内容小于标签时使蓝色柱换行<h1>并完全忽略图像卷轴？我为其制作了一个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 回答
叮当猫咪
TA贡献1776条经验 获得超12个赞
1）设置.reel>img { flex-shrink: 0 }将在图像下方显示滚动条
2）当您不使用flex-grow与同级元素相比的相对增长，而只是设置.red,.green,.blue { flex-grow: 1 }并使用flex-basis: xx%每种颜色时，就会发生换行。
不知何故，浏览器需要一个宽度来工作。请参阅/* ADDED CODE */CSS...
更新
OP询问：
有没有办法防止黑色、红色和绿色列占用超出其需要的空间，从而使蓝色列吃掉所有可用空间？
.blue这可以通过将除flex-grow: 0; flex-basis: auto(flexbox 默认值) 以外的所有设置以 和 的.blue flexbasis百分比 > 0% 且 < 100%（更准确地说：小于 100% 减去.black,.red和 的总宽度.green）来实现。设置.blue { flex-basis: auto }将不起作用，因为它会立即换行，因为它的flex-grow: 1.
更新了代码以反映上述内容（OVERRIDE 1）并添加了 OP 最终使用的最终值（OVERRIDE 2）。
只需尝试看看什么对您有用......
* {
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 关注
- 47 浏览
添加回答
举报
0/150
提交
取消