如何在没有空格的情况下在两侧之间留出空间

Question

我正在制作响应式菜单，

      <div style={{ display: "flex", flexFlow: "row wrap" }}>
        {/* left side */}
        <div key="1">nav 1</div>
        <div key="2">nav 2</div>
        <div key="3">nav 3</div>
        {/* left side */}

        {/* right side */}
        <div key="4">nav 4</div>
        <div key="5">nav 5</div>
        <div key="6">nav 6</div>
        {/* right side */}
      </div>

我想在两侧之间留一个空间，但它仍然可以用每个元素包裹。

类似这样的：

我不知道这个，谢谢你的帮助！

Answer 1

您可以在包装器内注入一个伪元素并设置它的order，以便将其放置在第 3 和第 4 div 之间；并设置flex-grow: 1:

#wrapper {
  display: flex;
  flex-wrap: wrap;
}
#wrapper > div:nth-child(-n + 3) {
  order: 1;
  background-color: papayawhip;
}
#wrapper::after {
  content: "";
  order: 2;
  flex-grow: 1;
}
#wrapper > div:nth-child(n + 4) {
  order: 3;
  background-color: palegoldenrod;
}

<div id="wrapper">
  <!-- left -->
  <div key="1">nav 1</div>
  <div key="2">nav 2</div>
  <div key="3">nav 3</div>
  <!-- right -->
  <div key="4">nav 4</div>
  <div key="5">nav 5</div>
  <div key="6">nav 6</div>
</div>

Answer 2

所以我使用 float: left/right 而不是 flex。尝试调整浏览器大小以查看结果。 这是一个可以玩的小提琴：https://jsfiddle.net/x7f2pvn9/

div.wrapper div {
  display: inline;
  background: red;
  padding: 1rem;
  margin: 5px;
  width: 40px;
  height: 50px;
}

div.left {
  float: left;
}

div.right {
  float: right;
}

@media only screen and (max-width: 600px) {
  div.right {
    float: left;
  }

}

<div class="wrapper">

    <div class="left">1</div>
    <div class="left">2</div>
    <div class="left">3</div>


    <div class="right">4</div>
    <div class="right">5</div>
    <div class="right">6</div>
</div>