Question

我一直在尝试使用flexbox创建一个带有固定透明标题的页面。刚开始，我发现这会以某种方式引起冲突（固定的位置和flex），而justify-content或align-items属性将不适用于flex-fixed父包装器的子元素。固定父级的子元素不会适当间隔。

但是后来我看到了这个https://templated.co/industrious，并且以某种方式起作用了！所以我不明白为什么它不适用于我的代码。在我看来，我没有做不同的事情。

header-fixed-flex div包装了LOGO，NAV和搜索（svg）元素，但是我无法使justify-content或align-items选项适用于header-nav和导航div。

    body {
        height: 2500px;
    }
    
    .header-fixed-flex {
        max-width: 150rem;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        display: flex;
        justify-content: space-between;
        transform: translate(19.2rem, 0);
    }
    
    .header_nav {
        max-width: 155rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .header_logo {
        max-height: 9.7rem;
        background: rgba(3, 12, 77, 0.4);
    }
    
    .header_link {
        padding: 0.5rem;
    }
    
    .navigation {
        background: rgba(191, 218, 218, 0.4);
        display: flex;
    }
    
    .navigation_list {
        list-style: none;
        letter-spacing: 0.4rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        height: 100%;
    }
    
    .navigation_item:not(:last-child) {
        margin-right: 3rem;
    }
    
    .navigation_link:link, .navigation_link:visited {
        color: #fff;
        text-decoration: none;
        padding: 0.8rem;
    }
    
    .navigation_button {
        border: none;
        background: none;
        display: flex;
        align-items: center;
    }
    
    .navigation_search-input {
        border: none;
        background: rgba(255, 255, 255, 0.1);
        outline: none;
        width: 5rem;
    }
    
    .navigation_icon {
        padding: 0.5rem;
        width: 3rem;
        fill: #fff;
    }
    
    .hero_img {
        background: url(https://twimg0-a.akamaihd.net/a/1350072692/t1/img/front_page/jp-mountain@2x.jpg) top/cover;
        height: 100vh;
    }

    <div class="header-fixed-flex">
        
        <div class="header_nav">
            <header class="header_logo">
                <a href="index.html" class="header_link">LOGO</a>
            </header>
          
            <nav class="navigation">
                <ul class="navigation_list">
                    <li class="navigation_item">
                        <a href="#" class="navigation_link">Profile</a>
                    </li>
                    <li class="navigation_item">
                        <a href="#" class="navigation_link">Services</a>
                    </li>
                    <li class="navigation_item">
                        <a href="#" class="navigation_link">Articles</a>
                    </li>
                    <li class="navigation_item">
                        <a href="#" class="navigation_link">Contact</a>
                    </li>
                </ul>
                <button class="navigation_button">
                    <input type="text" class="navigation_search-input" id="search-query"/>
                    <label for="search-query" class="navigation_search_label"></label>
                    <svg class="navigation_icon"></svg>
                </button>
            </nav>
        </div>
    </div>
    
    <section class="hero">
        <div class="hero_img"></div>
    </section>

或带有scss的codepen链接 https://codepen.io/tantoniou/pen/QoGmba

Answer 1

删除header-fixed-flex元素，并将此样式应用于header_nav

width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: 100;
display: flex;
justify-content: space-between;

Answer 2

在没有提供设计补偿或线框的情况下，很难从撰写的内容中确定您想要的内容，但是我最初的猜测是事情并未如您所愿地发生，因为.header-fixed-flex只有一个孩子。因此，也许在flex: 1上设置width: 100%或仅设置.header_nav都可以使您按需工作。

带Flexbox的透明固定接头

2 个答案: