CSS 强制 Flex 列表换行

css to force flex list to wrap

提问人：jmoreno 提问时间：11/5/2023 最后编辑：Temani Afifjmoreno 更新时间：11/23/2023 访问量：107

问：

赏金将在 2 小时后到期。这个问题的答案有资格获得 +100 声望赏金。Jmoreno希望引起人们对这个问题的更多关注：
如果可能的话，我希望解决方案支持交错列

我有一个带有 css 的有序列表（两者都来自其他地方，只能稍微调整一下），它将项目格式化为一行，我想要多行，但不知道如何强制它换行。

我无法修改任何“外部”样式。jsbin 上的最小可行示例

#external1 {
    bottom: 0;
    left: 0;
    margin-bottom: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    position: absolute;
    right: 0;
    top: 0;
    
    white-space: nowrap;
}
.external2 {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0 6px;
}

.external3 {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0 6px;
}

/*this class is under my control */
.howtowrap {
  flex-basis: 100%;
  width:100%;
}
  <ol id="external1" class="external2">
    
    <li class="external3">
      <div>content</div>
    </li>
    <li class="external3">
      <div>content 2</div>
    </li>
   <!-- I am injecting this element, I could add a class to the next li instead if that would be better -->
    <span class="howtowrap">W1</span>
    
    <li class="external3">
      <div>content 3</div>
    </li>
        <li class="external3">
      <div>content 4</div>
    </li>
    <span class="howtowrap">W2</span>
    
    <li class="external3">
      <div>content 5</div>
    </li>

    <li class="external3">
      <div>content 6</div>
    </li>
    <span class="howtowrap">W3</span>
    <li class="external3">
      <div>content 7</div>
    </li>
        <li class="external3">
      <div>content 8</div>
    </li>
    
    
  </ol>

我正在寻找结果的样子（W1、W2 和 W3 只是占位符）。另外，我不希望它在跨度之前换行。

content  content2
content3 content4
content5 content6
content7 content8
CSS 弹性框

评论

0赞 Temani Afif 11/17/2023
如果可以注入元素，难道不能在OL中添加一个新类吗？
0赞 jmoreno 11/17/2023
@TemaniAfif：是的，我可以。
2赞 Tim R 11/20/2023
我猜“外部”样式来自您无法编辑的外部样式表。但是，您可以包含具有相同 ID 和类名的样式表，这些样式表将覆盖和/或添加到外部样式表声明中，正如 imhvost 在他的回答中指出的那样。

答：

0赞 Kobina Arch 11/5/2023 #1

若要使 flex 容器的子项在多个子项填充父元素的宽度时换行，请在父元素上使用 flex-wrap 属性。

在您的情况下：

.external2 {
  /** ...old properties and values */
  flex-wrap : wrap
}

评论

0赞 jmoreno 11/5/2023
我无法更改任何外部类。
0赞 jmoreno 11/5/2023
但我可能会向 OL 添加一个新类或创建一个适用于它的新类。
2赞 imhvost 11/17/2023 #2

如果可以向 html 添加一些内容，例如，您还可以添加一个标签，例如在列表的末尾，其中包含覆盖当前样式的规则。像这样：<span class="howtowrap"><style>

#external1 {
    bottom: 0;
    left: 0;
    margin-bottom: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    position: absolute;
    right: 0;
    top: 0;
    
    white-space: nowrap;
}
.external2 {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0 6px;
}

.external3 {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0 6px;
}

/*this class is under my control */
.howtowrap {
  flex-basis: 100%;
  width:100%;
}
<ol id="external1" class="external2">
    
    <li class="external3">
      <div>content</div>
    </li>
    <li class="external3">
      <div>content 2</div>
    </li>
    <li class="external3">
      <div>content 3</div>
    </li>
        <li class="external3">
      <div>content 4</div>
    </li>
    <li class="external3">
      <div>content 5</div>
    </li>
    <li class="external3">
      <div>content 6</div>
    </li>
    <li class="external3">
      <div>content 7</div>
    </li>
    <li class="external3">
      <div>content 8</div>
    </li>
    <!-- 👇 -->
    <style>
      #external1{
        display: inline-grid!important;
        grid-template-columns: repeat(2, min-content);
        grid-auto-rows: min-content;
      }
    </style>
    
  </ol>

评论

0赞 Tim R 11/20/2023
事实上。“外部”规则不能编辑，但可以制作“内部”规则（通过或其他外部样式表）来否决或添加到“外部”声明中，而无需创建新类或添加其他元素。style
0赞 the Hutt 11/18/2023 #3

但我可能会向 OL 添加一个新类或创建一个适用于它的新类。

好的，让我们向 ..wrappable<ol>

/* new style rules */
.wrappable {
  flex-wrap: wrap;
  background: wheat;
  margin: 0;
  padding: 0;
}

.wrappable>li {
  flex: 1 0 calc(50% - 12px);
}


/* original untouched style rules */
#external1 {
  bottom: 0;
  left: 0;
  margin-bottom: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
}

.external2 {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0 6px;
}

.external3 {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0 6px;
}
<ol id="external1" class="external2 wrappable">

  <li class="external3">
    <div>content 1</div>
  </li>
  <li class="external3">
    <div>content 2</div>
  </li>

  <li class="external3">
    <div>content 3</div>
  </li>
  <li class="external3">
    <div>content 4</div>
  </li>

  <li class="external3">
    <div>content 5</div>
  </li>

  <li class="external3">
    <div>content 6</div>
  </li>
  <li class="external3">
    <div>content 7</div>
  </li>
  <li class="external3">
    <div>content 8</div>
  </li>


</ol>

如果您想要像文本行一样的简单换行，请删除：.wrappable>li

/* new style rules */

.wrappable {
  flex-wrap: wrap;
  background: wheat;
  margin: 0;
  padding: 0;
  width: 300px;
}


/* original untouched style rules */

#external1 {
  bottom: 0;
  left: 0;
  margin-bottom: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
}

.external2 {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0 6px;
}

.external3 {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0 6px;
}
<ol id="external1" class="external2 wrappable">

  <li class="external3">
    <div>content 1</div>
  </li>
  <li class="external3">
    <div>content 2</div>
  </li>

  <li class="external3">
    <div>content 3</div>
  </li>
  <li class="external3">
    <div>content 4</div>
  </li>

  <li class="external3">
    <div>content 5</div>
  </li>

  <li class="external3">
    <div>content 6</div>
  </li>
  <li class="external3">
    <div>content 7</div>
  </li>
  <li class="external3">
    <div>content 8</div>
  </li>


</ol>

0赞 Mr. SATAN 11/23/2023 #4

你想要多行的结果，对吧？为此，在列表项周围添加包装器并将属性应用于它。此外，还需要调整元素的属性，以确保它们占据整个宽度。flex-wrapflex-basis.howtowrap

上一个：闪亮数据表中的标题方向

下一个：获取 Chrome 的“重新计算样式”分析事件受影响的 DOM 元素