带flexbox的透明固定封头

Question

我一直在尝试用FlexBox制作一个带有固定透明页眉的页面。起初，我发现这会导致冲突（固定定位和flex)，并且justify-content或align-items属性不会在包装器flex-fixed父级的子元素上工作。固定父元素的子元素不能适当地间隔。

但是后来我看到了这个https://templated.co/industrious，不知怎么的它起作用了！所以我不明白为什么它不能和我的代码一起工作。在我看来我并没有做不同的事。

header-fixed-flex div包装了LOGO、NAV和search(svg)元素，但我不能让justify-content或align-items选项在header-nav和navigation div上工作。

null

    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/[e-mail]) 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>

null

或与scss 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

在没有提供设计comp或线框图的情况下，很难确定您想要的内容，但我的初步猜测是，事情并没有像您预期的那样发生，因为.header-fix-flex只有一个子文件。因此，可能在.header_nav上设置flex:1或只设置width:100%就可以使事情按您的意愿工作。