使用font - family:宋体;在嵌套flexbox

Question

我正在尝试在头上应用flexbox标签，并在ul上应用flexbox(嵌套的flexbox)当使用justify-content: space-between;">时，它可以正常工作。对于内部flexbox，它也不做任何事情，我希望它将每个导航栏列表项分开，中间留有一些空间，就像它为外部flexbox所做的那样，它可以使用margin来实现但是为什么使用不像外层弹性那样工作?

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;
}

Answer 1

两个flex box在技术上都是按预期工作的。

默认情况下，他们没有给你想要的布局，因为内部flex容器的flex-item父nav没有固有的"宽度"内部flex项目文本内容以外的信息。

3种可能的解决方案:

1. 内挠性容器父级<nav>:设置为固定或相对width
2. 内部伸缩项<li>:设置固定width或flex-basis
3. 内部伸缩项目<li>:添加一些适当的间距

Answer 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;
}

Answer 3

您应该添加width到nav，即flexul的父级，否则这两个将只使用它的内容的空间(即所有lis之间没有任何距离)，因此justify-content将不会有效。

我在下面编辑的代码中添加了40%的宽度-这足以展示justify-content: space-between的效果，但根据需要进行调整。注意，我还从ul中删除了默认的填充，并在所有内容上使用box-sizing: border-box;来将填充包含到宽度中，以防止页面在代码片段中横向溢出。

* {
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>