html - Flexbox order 属性无法对元素进行排序？

标签 html css navigation flexbox

所以我有一个包含 3 个元素的标题导航，.nav1、.site-branding( Logo )、.nav2。我正在尝试移动 .site-branding( Logo )位于中心，因此:

NAV LOGO NAV

问题:Flexbox order 属性在提供给 3 个类时不起作用。有什么想法吗？

这是现在的样子:https://i.sstatic.net/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;
        }
}

最佳答案

要将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 设置每个 flex 元素，即

.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 order 属性无法对元素进行排序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46802446/

上一篇：html - 如何更改 flex 子元素的祖先顺序

下一篇：javascript - 粘性菜单在 iOS Safari 和 Chrome 上过早跳转到固定位置

相关文章：

html - 标签溢出到网站上的其他元素中

css - 如何在无序列表中将边框样式属性设置为无？

html - 从 CSS 调整 SVG 的大小和颜色

html - CSS float 顺序不符合预期。为什么？

css - 打印样式表中的 Sass 变量覆盖 "all"样式表中的变量

html - 导航栏 - 搜索框 - 在调整浏览器大小时移动位置，我该如何解决这个问题？

javascript - 防止 javascript 函数自调用

javascript - Jquery 图像循环问题

css - IE9 不打印表体 (tbody) 需要多于一页时

html - 如何在 Google Chrome 上修复 1px 边距？

©2024 IT工具网  联系我们