时间戳

首页 > 解决方案 > 使用 justify-content: space-between; 在嵌套的弹性盒中

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

问题描述

我正在尝试在标题标签上应用 flexbox，并在标题标签（嵌套的 flexbox ）内的ul标签上应用 flexbox ，用于外部 flexbox justify-content: space-between; 被使用并且它工作正常，但是当使用justify-content: space-between;"对于内部 flexbox 也没有做任何事情，我希望它能够将每个导航栏列表项分开，并且在它们之间有一些空格，就像它所做的那样外部的 flexbox，可以使用margin来实现，但为什么要使用justify-content: space-between；" 不像外部弹性盒那样工作？

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

标签： htmlcssreactjsflexbox

解决方案

那是因为没有空间可供导航链接占用。父 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;
}

推荐阅读