(S)CSS Flexbox Justify-Content: Flex End Not Applying答案

【问题标题】：(S)CSS Flexbox Justify-Content: Flex End Not Applying(S)CSS Flexbox Justify-Content: Flex End Not Applying
【发布时间】：2022-01-15 11:27:56
【问题描述】：

我正在努力实现这一目标（我的 Figma 模型）：

在我的真实编码中不断得到这个（文本是虚拟的）：

这是我的页面 (S)CSS：

.navbarcont {
    margin-top: 2em;
    display: flex;
    background-color: hsl(206, 97%, 13%);
    border-radius: 34px;
    width: 80vw;
    height: 3em;
    margin-left: auto;
    margin-right: auto;
    

    .links {
        display: flex;
        justify-content: flex-start;
        margin-left: 2em;
        align-items: center;
    }

    ul {
        display: inherit;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1em;
    }

    .langcont {
        display: inherit;
        justify-content: flex-end;
        align-items: center;
    }
}

这是我的 React HTML：

<div className="navbarcont">
                    <div className="links">
                        <ul> {/*TODO: Remember to put icons before the a tags! (USE BOOTSTRAP ICONS!) */}
                            <li>
                                <a href="#">Hello</a>
                            </li>
                            
                            <li>
                                <a href="#">Hello</a>
                            </li>

                            <li>
                                <a href="#">Hello</a>
                            </li>
                        </ul>
                    </div>

                    <div className="langcont">
                        <div className="langtext">
                            <p>Language Select</p>
                        </div>
                    </div>
                </div>

我真的不知道我哪里出错了，或者为什么我不能在 langcont 类上使用 justify-content: flex-end;。

非常感谢您的帮助。

【问题讨论】：

标签： html css reactjs sass

【解决方案1】：

您需要在navbarcontent-class 中添加一个justify-content

.navbarcont {
  ...
  justify-content: space-between;
}

这将在两个 div 之间添加空间，并应按预期显示您的元素。

【讨论】：

【解决方案2】：

您必须在.navbarcont 上使用justify-content: space-between 属性

.navbarcont {
  display: flex;
justify-content: space-between;
...
}

【讨论】：