Question

所以我有一个包含3个元素的标题导航.nav1, .site-branding (logo), .nav2.我试图在中心移动.site-branding（徽标），所以：

NAV LOGO NAV

问题：给予3个类时，flexbox order属性不起作用。有什么想法吗？

现在看来是这样的：https://imgur.com/a/jSWox

HTML

<header id="masthead" class="site-header">

        <div class="site-branding">
                        <div class="site-branding-text">
                                    <p class="site-title"><a href="http://localhost/wordpress/" rel="home">Treehouse</a></p>
                                    <p class="site-description">Its an awesome website</p>
                            </div>
        </div><!-- .site-branding -->
            <nav id="site-navigation" class="main-navigation nav2">
                <div class="menu-toggle">   
                    <div id="sidebar-btn">
                        <span></span>
                        <span></span>
                        <span></span>               
                    </div>
                </div>
                <div class="menu-primary-menu-links-container"><ul id="primary-menu" class="menu"><li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-167"><a href="http://localhost/wordpress/">Home</a></li>
<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://localhost/wordpress/about/">About</a></li>
<li id="menu-item-1987" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-218 current_page_item menu-item-has-children menu-item-1987"><a href="http://localhost/wordpress/gallery/">Gallery</a><button class="dropdown-toggle" aria-expanded="false"><span class="dropdown-symbol">+</span><span class="screen-reader-text">Expand child menu</span></button>
<ul class="sub-menu">
    <li id="menu-item-1988" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1988"><a href="http://localhost/wordpress/book-a-workshop/">Book A Workshop</a></li>
</ul>
</li>
</ul></div>         </nav><!-- #site-navigation -->
            <nav id="site-navigation" class="main-navigation nav1">
                <div class="menu-toggle">   
                    <div id="sidebar-btn">
                        <span></span>
                        <span></span>
                        <span></span>               
                    </div>
                </div>
                <div class="menu-primary-menu-links-container"><ul id="primary-menu" class="menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-167"><a href="http://localhost/wordpress/">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://localhost/wordpress/about/">About</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-218 current_page_item menu-item-has-children menu-item-1987"><a href="http://localhost/wordpress/gallery/">Gallery</a><button class="dropdown-toggle" aria-expanded="false"><span class="dropdown-symbol">+</span><span class="screen-reader-text">Expand child menu</span></button>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1988"><a href="http://localhost/wordpress/book-a-workshop/">Book A Workshop</a></li>
</ul>
</li>
</ul></div>         </nav><!-- #site-navigation --> 
    </header>

CSS

@media screen and (min-width: 601px) {

    .site-header {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .site-branding {
        text-align: center;
        flex:1 100%;
        /*flex: 1 0 auto;  */
        /*Grow to 1 in size, 0 it should NOT shrink in size when the screen is smaller (i.e. squeesh with navigation), auto - the site of container is whatever the size content in it is*/
    }
    #site-navigation {
        flex:0;
        margin: auto;
    }

    .main-navigation ul {
        /*flex-wrap: nowrap;*/
    }
}

@media screen and (min-width: 1080px) {

        html {
            font-size: 20px;
        }
            .main-navigation ul {
            flex-wrap: nowrap;
        }

        .site-branding {
            flex:0;
            order: 1;
        }

        #site-navigation {
            order: 1;
        }

         /*Navigation Laptop*/
        .nav2 {
            order:0;
        }

        .nav1 {
            order:1;
        }
}

Answer 1

要将site-branding移至中心，请将nav1的{{1}}媒体资源设为order。

由于默认值为-1，因此会将其移至开头，并将0保留在中间位置。

注意，我在这里没有使用您的所有媒体查询，只是展示最简单的操作方法。

Stack snippet

＆＃13;

site-branding

＆＃13;

.site-header {
  display: flex;
}

.site-branding {
  text-align: center;
  flex: 1 0 auto;
}

.nav1 {
  order: -1;
}

＆＃13;

您当然也可以使用<header id="masthead" class="site-header"> <div class="site-branding"> <div class="site-branding-text"> <p class="site-title"><a href="http://localhost/wordpress/" rel="home">Treehouse</a></p> <p class="site-description">Its an awesome website</p> </div> </div>  <nav id="site-navigation" class="main-navigation nav2"> <div class="menu-toggle"> <div id="sidebar-btn"> <span></span> <span></span> <span></span> </div> </div> <div class="menu-primary-menu-links-container"> <ul id="primary-menu" class="menu"> <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-167"><a href="http://localhost/wordpress/">Home</a></li> <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://localhost/wordpress/about/">About</a></li> <li id="menu-item-1987" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-218 current_page_item menu-item-has-children menu-item-1987"><a href="http://localhost/wordpress/gallery/">Gallery</a> <button class="dropdown-toggle" aria-expanded="false"><span class="dropdown-symbol">+</span><span class="screen-reader-text">Expand child menu</span></button> <ul class="sub-menu"> <li id="menu-item-1988" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1988"><a href="http://localhost/wordpress/book-a-workshop/">Book A Workshop</a></li> </ul> </li> </ul> </div> </nav>  <nav id="site-navigation" class="main-navigation nav1"> <div class="menu-toggle"> <div id="sidebar-btn"> <span></span> <span></span> <span></span> </div> </div> <div class="menu-primary-menu-links-container"> <ul id="primary-menu" class="menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-167"><a href="http://localhost/wordpress/">Home</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://localhost/wordpress/about/">About</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-218 current_page_item menu-item-has-children menu-item-1987"><a href="http://localhost/wordpress/gallery/">Gallery</a> <button class="dropdown-toggle" aria-expanded="false"><span class="dropdown-symbol">+</span><span class="screen-reader-text">Expand child menu</span></button> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1988"><a href="http://localhost/wordpress/book-a-workshop/">Book A Workshop</a></li> </ul> </li> </ul> </div> </nav>  </header>设置每个弹性项目，即

order

＆＃13;

.site-branding {
  text-align: center;
  flex: 1 0 auto;
  order: 2;
}
.nav1 {
  order: 1;
}
.nav2 {
  order: 3;
}

＆＃13;

.site-header {
  display: flex;
}

.site-branding {
  text-align: center;
  flex: 1 0 auto;
  order: 2;
}

.nav1 {
  order: 1;
}

.nav2 {
  order: 3;
}

＆＃13;

Flexbox订单属性无法订购元素？

1 个答案: