html - 如何创建 33% / 33% / 33% / 100% / 100% flexbox 布局？

Question

我正在尝试创建一个类似于这样的 flexbox 布局：

我想将前 3 个项目平均分布在第一行，另外 2 个项目跨越接下来两行的 100%。

这是HTML：

<header>
    <nav class="navbar">
        <a href="#" class="navbar-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>

        <div class="links products">
            <a href="#">AUTOGRAPHS</a>
            <a href="#">CARDS</a>
        </div>

        <div class="title">
            <a href="index.html">YARDSALE SPORTS</a>
        </div>

        <div class="links cart">
            <a href="#">CART (0)</a>
        </div>

        <div class="links navbar-menu">
            <ul>
                <li><a href="#">AUTOGRAPHS</a></li>
                <li><a href="#">CARDS</a></li>
            </ul>
        </div>
    </nav>
</header>

导航栏当前如下所示：

但我想让它看起来像这样：

汉堡包按钮、标题和购物车占据第一行，然后签名/卡片分别占据一整行

我已经尝试过：

.navbar:nth-child(-n + 3) {
  width: 33%;
}

和

.navbar:nth-child(n + 4) {
  width: 100%;
}

标签： htmlcssflexbox

Answer 1

在不触及当前 HTML 的情况下，您可以通过flex-basis: 100%对所有项目使用，然后仅对前三个项目使用flex-basis: calc(100%3)

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

.navbar>* {
  outline: 1px solid red;
  flex-basis: 100%
}

.navbar>*:nth-child(-n+3) {
  flex-basis: calc(100%/3)
}

<header>

  <nav class="navbar">
    <a href="#" class="navbar-button">
      <span class="bar">1item</span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>
    <div class="links products">
      <a href="#">AUTOGRAPHS</a>
      <a href="#">CARDS</a>
    </div>

    <div class="title">
      <a href="index.html">YARDSALE SPORTS</a>
    </div>

    <div class="links cart">
      <a href="#">CART (0)</a>
    </div>

    <div class="links navbar-menu">
      <ul>
        <li><a href="#">AUTOGRAPHS</a></li>
        <li><a href="#">CARDS</a></li>
      </ul>
    </div>
  </nav>
</header>