弹性框顺序属性无法对元素进行排序

Question

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

NAV LOGO NAV

问题：弹性框顺序属性在提供给 3 个类时不起作用。有什么想法吗？

这是它现在的样子： https://i.stack.imgur.com/A8WQj.jpg

.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的order属性设置为 -1 。

由于默认值为 0 ，这会将其移动到开头并将site-branding留在中间。

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

堆栈代码段

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

<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>

---

当然，您也可以使用order设置每个弹性项目，即

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

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

<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>