Branding

Branding

关注
发信
关注(28)粉丝(399)

html - Flexbox订单属性对订单元素无效？

所以我有一个包含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;
        }
}

最佳答案

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

关于html - Flexbox订单属性对订单元素无效？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46802446/

10-09 20:58
Powered by LMLPHP ©2024 Branding 0.033477