在flexbox CSS中，我已经在使用justify-content定位导航元素，如何在周围留出空间？

Question

这是我一直在寻找的问题。我正在使用justify-content：flex-end只是为了使导航链接位于主轴的末端。但是现在我也想使用我通常使用的space-between属性将容器中的项目隔开。事实是，我已经用flex-end值声明了justify-content。是否有更常规的方式来执行此操作，或者我一直都在错误地执行此操作。请参见下面的代码和图片。

// Nav
import React from "react";


const NavBar = () => {
    return(
        <div>
            <nav>
                <ul className="nav__list">
                    <li className="nav__item">Home</li>
                    <li className="nav__item">About</li>
                    <li className="nav__item">Donate</li>
                </ul>
            </nav>
        </div>
    )
}

export default NavBar;


// CSS

.nav__list {
  color: red;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: space-evenly;
}

Answer 1

您可以省略align-items: space-evenly;，因为在这种情况下它没有任何作用。