如何排除 flexbox nowrap 中的第一项？答案

【问题标题】：How to exclude the first item in a flexbox nowrap?如何排除 flexbox nowrap 中的第一项？
【发布时间】：2021-03-13 09:54:43
【问题描述】：

除了将第一个元素移出容器之外，还有其他方法可以排除 flex nowrap 中的第一个项目吗？我想在第一个元素下添加最后三个元素。

HTML

<div class="container">    
  <div id="tobeexcluded">abc</div>
  <div class="flexitem">content</div>
  <div class="flexitem">content</div>
  <div class="flexitem">content</div>
</div>

CSS

.container {
    display: flex;
    flex-flow: row nowrap;
}

实际容器的小提琴： https://jsfiddle.net/vtax2bgf/6/

我想要达到的东西（不将第一个元素移出容器）：https://jsfiddle.net/4gefxk90/6/

【问题讨论】：

启用换行并使第一个元素宽度：100%
@TemaniAfif 我希望最后三个元素始终放在一行中。如果我按照你的建议去做，那么这个要求就不会得到满足。
总是在第一个下面有 3 项？
@TemaniAfif 它应该与用例无关 - 如果有 1000 个元素 - 将出现滚动。假设答案是：不。

标签： css flexbox

【解决方案1】：

inline-block 配置可以做到这一点，不需要 flexbox：

.container {
  white-space:nowrap;
  overflow:auto;
  font-size:0;
}
.container * {
  font-size:initial;
}
#tobeexcluded {
  display:block;
}
.container > .flexitem {
  display:inline-block;
  padding:5px;
  border:1px solid green;
}

<div class="container">    
  <div id="tobeexcluded">abc</div>
  <div class="flexitem">some content</div>
  <div class="flexitem">some content</div>
  <div class="flexitem">some content</div>
</div>

<div class="container">    
  <div id="tobeexcluded">abc</div>
  <div class="flexitem">some content</div>
  <div class="flexitem">some content</div>
  <div class="flexitem">some content</div>
  <div class="flexitem">some content</div>
  <div class="flexitem">some content</div>
  <div class="flexitem">some content</div>
  <div class="flexitem">some content</div>
  <div class="flexitem">some content</div>
  <div class="flexitem">some content</div>
  <div class="flexitem">some content</div>
</div>

【讨论】：