使 flex-wrap 忽略某些元素

Question

我有一个启用了 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;

}

Answer 1

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）。只需尝试看看什么对您有用......&nbsp; &nbsp; &nbsp; &nbsp; * {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; &nbsp; &nbsp; }/* ADDED CODE (original answer) */.black&nbsp; { flex-basis:&nbsp; 5% } /* example values */.red&nbsp; &nbsp; { flex-basis: 15% }.green&nbsp; { flex-basis: 30% }.blue&nbsp; &nbsp;{ flex-basis: 50% } /* [MUST] add up to 100% */&nbsp; &nbsp; &nbsp; &nbsp; .reel > img {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-shrink: 0;&nbsp; &nbsp; &nbsp; &nbsp; }/* OVERRIDE 1: ADDED CODE, as per OP remarks (UPDATE) */.black&nbsp; { flex-basis: auto }.red&nbsp; &nbsp; { flex-basis: auto }.green&nbsp; { flex-basis: auto }.blue&nbsp; &nbsp;{ flex-basis: 25%&nbsp; }/* OVERRIDE 2: OP final choice */.black&nbsp; { flex-basis:&nbsp; 50px }.red&nbsp; &nbsp; { flex-basis: 100px }.green&nbsp; { flex-basis: 100px }.blue&nbsp; &nbsp;{ flex-basis:&nbsp; 25%&nbsp; }/**/&nbsp; &nbsp; &nbsp; &nbsp; .green {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: green;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .red {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: red;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .blue {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: blue;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .black {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: black;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .display\:flex {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .flex-direction\:column {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .flex-direction\:row {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-direction: row;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .flex-wrap\:wrap {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-wrap: wrap;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .flex-grow\:100 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-grow: 100;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .flex-grow\:2 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-grow: 2;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .flex-grow\:1 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-grow: 1;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .flex-grow\:0 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-grow: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .flex-shrink\:1 {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-shrink: 1;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .height\:100vh {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .reel {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow-x: auto;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .reel > img {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-width: 25%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .reel > * + * {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-left: 10px;&nbsp; &nbsp; &nbsp; &nbsp; }<body class="width:100%"><div class="display:flex flex-direction:row flex-wrap:wrap height:100vh">&nbsp; &nbsp; <div class="black flex-grow:0">&nbsp; &nbsp; &nbsp; &nbsp; Column1&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="red flex-grow:1">&nbsp; &nbsp; &nbsp; &nbsp; Column2&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <input>&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <input>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="green flex-grow:1">&nbsp; &nbsp; &nbsp; &nbsp; Column3&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <input>&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <input>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="blue flex-grow:1">&nbsp; &nbsp; &nbsp; &nbsp; <h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; This is some long header text in Column4&nbsp; &nbsp; &nbsp; &nbsp; </h1>&nbsp; &nbsp; &nbsp; &nbsp; <div class="reel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://i.imgur.com/M7LUTq5.jpg">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div></body>