时间戳

首页 > 解决方案 > flex中的换行符

html - flex中的换行符

问题描述

我已经完成了使用 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>

标签： htmlcssflexboxline-breaks

解决方案

您需要将.line-break的高度设置为1px，并且当您从中选择 div 元素时.rightcol，不要选择.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>

推荐阅读