使用 justify-content: space-between;在嵌套的弹性盒中答案

【问题标题】：Using justify-content: space-between; in nested flexbox使用 justify-content: space-between;在嵌套的弹性盒中
【发布时间】：2021-12-15 08:05:10
【问题描述】：

我正在尝试在 header 标记上应用 flexbox，并在标题标记内的 ul 标记上应用 flexbox（nested flexbox)，对于外部 flexbox，使用了 justify-content: space-between; 并且工作正常，但是当使用 justify-content: space-between;" 时内部的 flexbox 也没有做任何事情，我希望它像外部 flexbox 那样在每个导航栏列表项之间留一些空间，它可以使用 margin 来实现，但为什么是使用 justify-content: space-between;" 不像外部 flexbox 那样工作？

JSX

import { NavLink } from "react-router-dom";
import classes from "./Navbar.module.css";

function Navbar() {
  return (
    <header className={classes.header}>
      <div>Logo</div>
      <nav className={classes.nav}>
        <ul>
          <li>
            <NavLink to="./">Home</NavLink>
          </li>
          <li>
            <NavLink to="./">News</NavLink>
          </li>
          <li>
            <NavLink to="./">Contact</NavLink>
          </li>
          <li>
            <NavLink to="./">About</NavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
}

export default Navbar;

CSS

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 5rem;
  padding: 0 10%;
  background-color: aquamarine;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

nav a {
  text-decoration: none;
}

【问题讨论】：

标签： html css reactjs flexbox

【解决方案1】：

您应该在nav 中添加width，即flex ul 的父级，否则这两个将仅使用其内容的空间（即所有lis，它们之间没有任何距离)，因此justify-content 将完全无效。

我在下面的代码编辑中添加了 40% 的宽度 - 这足以证明 justify-content: space-between 的效果，但可以根据需要进行调整。请注意，我还从 ul 中删除了默认填充，并在所有内容上使用了 box-sizing: border-box; 以将填充包含在宽度中，以免页面在 sn-p 中水平溢出。

* {
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 5rem;
  padding: 0 10%;
  background-color: aquamarine;
}

nav {
  width: 40%;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

nav a {
  text-decoration: none;
}

<header className={classes.header}>
  <div>Logo</div>
  <nav className={classes.nav}>
    <ul>
      <li>
        <NavLink to="./">Home</NavLink>
      </li>
      <li>
        <NavLink to="./">News</NavLink>
      </li>
      <li>
        <NavLink to="./">Contact</NavLink>
      </li>
      <li>
        <NavLink to="./">About</NavLink>
      </li>
    </ul>
  </nav>
</header>

【讨论】：

【解决方案2】：

这是因为没有空间可供导航链接占用。父 flex 将可用空间划分为两个项目相等。所以要实现你想要的，你需要定义每个部分的空间。

实现这一目标的一种方法是使用flex-grow。

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 5rem;
  padding: 0 10%;
  background-color: aquamarine;
}

// here I give the logo equal size of space as the nav
// you can change the values whatever you desire.

div {
  flex-grow: 4  //div for logo
}

nav {
  flex-grow: 4
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

nav a {
  text-decoration: none;
}

【讨论】：

【解决方案3】：

两个弹性盒子在技术上都按预期工作。

默认情况下，它们没有给你想要的布局，因为内部弹性容器的弹性项目父 nav 除了内部弹性项目文本内容之外没有固有的“宽度”信息。

3 种可能的解决方案：

内部 flex continer 的父级 <nav>：设置固定或相对 width
内部弹性项目<li>：设置固定width或flex-basis
内部弹性项目<li>：添加一些适当的间距

【讨论】：