html - 如何在 flex-direction 列容器中使一些子元素 50% 宽并排？

Question

我使用 bootstrap 4 .navbar-nav。

这是 codeply 上的完整现场演示 https://www.codeply.com/go/Zib61kYY2M

当 .navbar-nav 在设置的断点处进入移动折叠模式时。

应用了下面的这些样式，并创建了一个漂亮的导航栏按钮堆叠列表。

display: flex;
flex-direction: column;

但是我需要控制最后两个子.nav-item的宽度。我需要这些元素并排显示。

这可以用 flex 实现吗？

这是当前导航的样子......

这就是我希望最后两项的外观...

我在最后 2 个名为 .nav-account 的元素中添加了 2 个类，所以我只需要像这样设置一些 css...

.nav-account {
   width: 50%;
   ...
}

因此，将最后 2 个元素设为 50% 宽并且彼此相邻。

下方和此处的完整代码 https://www.codeply.com/go/Zib61kYY2M

<ul class="navbar-nav flex-lg-grow-1 text-center text-lg-right">
    <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">FAQ's</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
    </li>
    <li class="nav-item nav-account ml-lg-auto">
        <a class="nav-link" href="https://dev.thesweetpeople.co/wp-login.php?redirect_to=https%3A%2F%2Fdev.thesweetpeople.co%2Fprofile">Log in</a>
    </li>

    <li class="nav-item nav-account">
        <a class="nav-link" href="/register"><i class="fas fa-fw fa-user-plus color-sweets"></i> Register</a>
    </li>
</ul>

Answer 1

您可以尝试以下方法:

1. 将 flex-wrap flex-row 类添加到您的 ul(这会将 flex-direction 始终设置为 row 并设置 flex-wrap)
2. 将 col-12 col-lg-auto 添加到您的 nav-items 期望最后两个(设置 100% flex-basis移动 View )
3. 将 col-6 col-lg-auto 添加到最后两个 nav-items(为最后一个设置 50% flex-basis移动 View 中的两个元素)

请看下面的演示:

.navbar {
  opacity: 1;
  transition: opacity 0.5s ease;
}
.navbar-hide {
  pointer-events: none;
  opacity: 0;
}
.nav-item {
  border: 1px solid red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Flex direction</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav flex-lg-grow-1 text-center text-lg-right flex-wrap flex-row">
      <li class="nav-item col-12 col-lg-auto active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">Products</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">FAQ's</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item nav-account ml-lg-auto col-6 col-lg-auto">
        <a class="nav-link" href="https://dev.thesweetpeople.co/wp-login.php?redirect_to=https%3A%2F%2Fdev.thesweetpeople.co%2Fprofile">Log in</a>
      </li>
      <li class="nav-item nav-account col-6 col-lg-auto">
        <a class="nav-link" href="/register"><i class="fas fa-fw fa-user-plus color-sweets"></i> Register</a>
      </li>
    </ul>
  </div>
</nav>
<main role="main" class="container">
  <div class="jumbotron">
    <h1>Flex direction</h1>
    <p class="lead">My question, in mobile mode, is it possible to make the the <strong>register</strong> and <strong>login</strong> buttons 50% wide and side by side using flex?</p>
    <a class="btn btn-lg btn-primary" href="https://getbootstrap.com/docs/4.3/utilities/flex/" role="button">View flex docs »</a>
  </div>
</main>