Is there any way to force wrap a single flexbox item onto a new line? If not, what would be a better approach?

Question

I want to force a single flex-box item to wrap on a new row whilst keeping the other items on that row. If this is not possible, is there a better approach without modifying the html too much? I just dont want to mess up the mobile and desktop versions of this website because the tablet version is the one that is messed up right now. Basically, I want to have the list of links expand below the navbar in the tablet version exactly like the mobile version, but keeping everything else on the first row. Thank you so much!

I tried forcing the nav__list item to go on a new row while keeping the logo, menu icon, and buttons on the first row by using flexbox, however, I couldnt figure out anything that worked. The javascript file is just handling the collapsible animation. You can ignore it for now. Also, don't worry about the styling for the buttons or the section element, they are not really important to solve this problem. This is my code for this section:

CSS:

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 2.4rem;
}

.nav__list {
  width: 100%;
  margin: 0;
}

.nav__item:first-child {
  padding-top: 3.4rem;
}

.nav__item {
  padding-bottom: 2rem;
}

.nav .btn {
  display: none;
}

.nav__item > a {
  color: #000;
  transition: color 0.3s;
}

.nav__item > a:hover {
  color: var(--color-primary);
}

.nav__toggler {
  transition: box-shadow 0.2s;
}

.nav__brand {
  transform: translateY(3px);
}

.nav.collapsible--expanded .nav__toggler {
  box-shadow: 0 0 0 3px #666;
}

@media screen and (min-width: 768px) {
  .nav {
    flex-wrap: nowrap;
  }
  .nav__toggler {
    display: flex;
    order: 3;
    margin-left: 1.2rem;
  }

  .nav .btn {
    display: inline-block;
    padding: 1.4rem 2.4rem;
    margin: 0;
  }

  .nav .btn--white {
    margin-right: 1.6rem;
  }

  .nav__list {
    margin-left: 2.4rem;
  }
}

@media screen and (min-width: 1024px) {
  .nav__toggler {
    display: none;
  }

  .nav__list {
    display: flex;
    width: auto;
    max-height: 100%;
    opacity: 1;
    margin-right: auto;
    margin-left: 2.4rem;
  }

  .nav__item:first-child {
    padding-top: 0;
  }

  .nav__item {
    padding-right: 2.4rem;
    padding-bottom: 0;
  }

  .nav .btn {
    display: flex;
    padding: 1.4rem 2.4rem;
    margin: 0;
  }

  .nav .btn--white {
    margin-right: 2.4rem;
  }
}

HTML:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flaming Patty</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="../css/normalize.css" />
    <link rel="stylesheet" href="../css/styles.css" />
  </head>
  <body>
    <nav class="nav collapsible">
      <a class="nav__brand" href="/"><img src="../images/logo.svg" alt="" /></a>
      <span
        class="icon-container icon-container--menu nav__toggler"
        style="flex-shrink: 0"
      >
        <svg class="icon--menu">
          <use href="../images/sprite.svg#menu"></use>
        </svg>
      </span>
      <ul class="list nav__list collapsible__content">
        <li class="nav__item"><a href="#">Home</a></li>
        <li class="nav__item"><a href="#">About</a></li>
        <li class="nav__item"><a href="#">Menu</a></li>
        <li class="nav__item"><a href="#">Contact</a></li>
        <li class="nav__item"><a href="#">Delivery</a></li>
      </ul>
      <button class="btn btn--white">Order online</button>
      <button class="btn btn--primary">Reserve</button>
    </nav>
    <section class="block block--orange">
      <header class="block__header">
        <h2 class="block__heading">Heading</h2>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae,
          et.
        </p>
      </header>
    </section>
    <script src="../javascript/main.js"></script>
  </body>
</html>

Does this answer your question? [How to specify line breaks in a multi-line flexbox layout?](https://stackoverflow.com/questions/29732575/how-to-specify-line-breaks-in-a-multi-line-flexbox-layout) — Erik Philips, Jul 09 '23 at 08:48

Is there any way to force wrap a single flexbox item onto a new line? If not, what would be a better approach?

0 Answers0