flex中的换行符[重复]答案

【问题标题】：Line break within flex [duplicate]flex中的换行符[重复]
【发布时间】：2020-12-18 23:57:35
【问题描述】：

我已经完成了使用 flex 时插入换行符的答案。但是，我的情况有点不同。

我有一个左栏和一个右栏。无论如何，左列应始终为 200px。右列需要包含三列，然后换行到接下来的三列。

因为我已经指定了 flex-wrap: nowrap;这往往会使事情复杂化。

如果可能的话，有什么想法吗？我确信它一定是，但我一直在反对这个没有解决方案。

.flex {
  display: flex;
  flex-wrap: nowrap;
}

.line-break {
  width: 100%;
}

.leftcol {
  width: 200px;
  border: 1px solid green;
}

.rightcol {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid blue;
}

.rightcol div {
  width: 100px;
  margin: 1%;
  border: 1px solid red;
}

<div class="flex">
  <div class="leftcol">
    Stuff
  </div>
  <div class="rightcol">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div class="line-break"></div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

【问题讨论】：

这能回答你的问题吗？ Flexbox item wrap to a new line
.line-break{min-width:100%} 应该这样做
效果很好。唉，每个 div 中的内容将是一个图像。当我将图像添加到 div 时，它们的大小不会正确调整。 ```
glsmyth.files.wordpress.com/2014/02/ghost-in-the-shell.jpg" alt="image" />
这里都是关于特异性的，宽度：100% 没有被应用。将.line-break 更改为.rightcol div.line-break，你就很好了

标签： html css flexbox line-breaks

【解决方案1】：

您需要使line-break 类比.rightcol div 类具有更高的特异性：

要么：

.line-break {
  width: 100%!important;
}

或：

.rightcol div.line-break {
  width: 100%;
}

将解决问题

.flex {
  display: flex;
  flex-wrap: nowrap;
}

.rightcol div.line-break {
  width: 100%;
}

.leftcol {
  width: 200px;
  border: 1px solid green;
}

.rightcol {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid blue;
}

.rightcol div {
  width: 100px;
  margin: 1%;
  border: 1px solid red;
}

<div class="flex">
  <div class="leftcol">
    Stuff
  </div>
  <div class="rightcol">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div class="line-break"></div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

【讨论】：

代码不起作用
@smunteanu 哪个部分不起作用？
这条线 - 我在我的电脑上尝试了代码，这条线没有任何区别。输出完全相同。您可以将高度设置为 1px。这本来可以@dantheman93
@smunteanu 我已经使用我说的代码添加了一个代码 sn-p。换行符现在对你有用吗？将高度设为 1px 什么都不做？您的答案基本上使用了相同的解决方案。
哦，所以这条线必须是透明的，而且你还必须让 div 边框不选择分隔线。抱歉告诉你关于 1px 的事情 - 我的错误@dantheman93

【解决方案2】：

您需要将.line-break的高度设置为1px，并且当您从.rightcol中选择div元素时，不要选择.line-break，而只选择包含数字的div元素，像这样：

    .flex {
        display: flex;
        flex-wrap: nowrap;
    }
    .line-break {
        width: 100%;
        height: 1px;
    }
    .leftcol {
        width: 200px;
        border: 1px solid green;
    }
     .rightcol {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        border: 1px solid blue;
    }
    .rightcol div:not(.line-break) {
        width: 100px;
        margin: 1%;
        border: 1px solid red;
    }

    <div class="flex">
        <div class="leftcol">
            Stuff
        </div>
        <div class="rightcol">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div class="line-break"></div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>

【讨论】：

【解决方案3】：

无论如何，左列应始终为 200 像素。

所以在.leftcol 上禁用flex-shrink。

右列需要包含三列，然后换行到接下来的三列。

（我认为您的意思是“换行到下一行”？）

在.rightcol 上使用嵌套网格。

.flex {
  display: flex;
  flex-wrap: nowrap;
}

.line-break {
  width: 100%;
}

.leftcol {
  width: 200px;
  flex-shrink: 0; /* disable flex-shrink */
  /* flex: 0 0 200px; can remove both lines above and use this instead */
  border: 1px solid green;
}

.rightcol {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  padding: 10px;
  border: 1px solid blue;
}

.rightcol div {
  border: 1px solid red;
}

<div class="flex">
  <div class="leftcol">
    Stuff
  </div>
  <div class="rightcol">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</div>

【讨论】：