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

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>

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

像这样的东西：

我对此一无所知，谢谢您的帮助！

标签： htmlcssflexboxresponsive

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>