时间戳

首页 > 解决方案 > 无法让 flexbox 证明内容正常运行

css - 无法让 flexbox 证明内容正常运行

问题描述

我正在尝试使用 justify-content space-between 来对齐屏幕两端的 div .header__top 中的两个元素，但由于某种原因，它们彼此相邻。

const HeaderHome = () => {
    return (
        <div className="header">
            <div className="header__top">
                <h1 className="primary-text">Text</h1>
                <Link className="Header__top--btn btn">Log In</Link>
            </div>
        </div>
    )
};

'''

.header{
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: #485461;
    background-image: linear-gradient(315deg, rgba(72, 84, 97, 0.5) 0%, rgba(40, 49, 59, 0.5) 74%) ,url("./header.png"); 
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    object-fit: contain;
    overflow: hidden;
    
}
.header__top{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

标签： cssreactjsjsx

解决方案

justify-content: space-between仅当您设置容器的宽度时才有效。

所以，添加width: 100%;到.header__top.

推荐阅读