(S)CSS Flexbox 对齐内容：Flex 结束未应用

Question

我正在努力实现这一目标（我的 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 class.

上使用 justify-content: flex-end;

非常感谢您的帮助。

Answer 1

您需要在 navbarcontent-class

中添加一个 justify-content

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

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

Answer 2

您必须在 .navbarcont

上使用 justify-content: space-between 属性

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

(S)CSS Flexbox 对齐内容：Flex 结束未应用

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

html

css

sass

reactjs