Flexbox：如何将徽标和导航栏内联对齐推向相反的方向

Question

我正在尝试将徽标和导航线对齐在同一条线上。徽标位于窗口左侧，导航位于窗口右侧，使用flexbox。

到目前为止，我的徽标和导航栏显示在同一行（906px中的最后一个项目除外）。他们不是两端。

＆＃13;

＆＃13;

    /* Desktop */
    @media (min-width: 900px) {  
    	.logo-name {   
    		display: inline-flex;
    		background-color: orange;		
    	}    
    	.main-nav {
    		display: inline-flex;
    		width: 40%;	
    		justify-content:flex-end;
    		background-color: blue;   
    	}
    }

＆＃13;

    	<header class="main-header">
   		<h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1
 
    		<nav class="main-nav">
     			<li class="nav-item-1"><a href="#">home</a></li>
    			<li><a href="#">services</a></li>
    			<li><a href="#">gallery</a></li>
    			<li><a href="#">about us</a></li>
    			<li><a href="#">contact</a></li>
    			<li><a href="#">FREE QUOTE</a></li>
    		</nav>
    	</header>

＆＃13;

＆＃13;

＆＃13;

有什么想法吗？

Answer 1

在对齐和项目时，您应该使用align-self，当您将子项与元素对齐时，您应该使用justify-content。

所以改为

@media (min-width: 900px) {  
    .logo-name {   
        display: inline-flex;
        background-color: orange;       
    }    
    .main-nav {
        display: inline-flex;
        width: 40%; 
        align-self: flex-end;
        background-color: blue;   
    }
}

您可以在此处了解更多信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-14

Answer 2

.main-header是.logo-name和.main-nav的父级。您应该将display：flex和justify-content：space-between设置为parent，在本例中为.main-header，如下所示：

＆＃13;

＆＃13;

/* Desktop */
/*@media (min-width: 900px) { 
  .main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
    .logo-name {   
        background-color: orange;       
    }    
    .main-nav {
        display: flex;
        width: 40%; 
        background-color: blue;   
    }
}*/

  .main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
    .logo-name {   
        background-color: orange;       
    }    
    .main-nav {
        display: flex;
        width: 40%; 
        background-color: blue;   
    }

＆＃13;

 <header class="main-header">
   <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>

        <nav class="main-nav">
            <li class="nav-item-1"><a href="#">home</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">about us</a></li>
            <li><a href="#">contact</a></li>
            <li><a href="#">FREE QUOTE</a></li>
        </nav>
    </header>

＆＃13;

＆＃13;

＆＃13;

Answer 3

flex模型在框内有效。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

您可能还想在标题上使用flex模型：

header {
  display:flex;
  justify-content:space-between;    
}

＆＃13;

＆＃13;

/* Desktop */

@media (min-width: 900px) {
  header {
    display: flex;
    justify-content: space-between;
  }
  .logo-name {
    display: inline-flex;
    background-color: orange;
  }
  .main-nav {
    display: inline-flex;
    width: 40%;
    justify-content: flex-end;
    background-color: blue;
  }
}

＆＃13;

<header class="main-header">
  <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>

  <nav class="main-nav">
    <li class="nav-item-1"><a href="#">home</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">FREE QUOTE</a></li>
  </nav>
</header>

＆＃13;

＆＃13;

＆＃13;

或使用text-align＆amp; text-align-last，而子项是内联框（inline-flex）。

header {
  text-align:justify;
  text-align-last:justify;
}

＆＃13;

＆＃13;

/* Desktop */

@media (min-width: 900px) {
  header {
    text-align: justify;
    text-align-last: justify;
  }
  .logo-name {
    display: inline-flex;
    background-color: orange;
  }
  .main-nav {
    display: inline-flex;
    width: 40%;
    justify-content: flex-end;
    background-color: blue;
  }
}

＆＃13;

<header class="main-header">
  <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>

  <nav class="main-nav">
    <li class="nav-item-1"><a href="#">home</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">FREE QUOTE</a></li>
  </nav>
</header>

＆＃13;

＆＃13;

＆＃13;