弹性框:如何对齐徽标和内联推送到相反方向的导航栏

Question

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

到目前为止，徽标和导航栏出现在同一行(除了 906px 中的最后一个 li 项(。而且它们并不处于相反的两端。

    /* 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;   
    	}
    }

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

有什么想法吗？

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 ，在本例中为 .main-header，如下所示：

/* 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;   
    }

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

Answer 3

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

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

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

/* 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;
  }
}

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

或者在子项是内联框时使用文本对齐和文本对齐最后(内联弹性(。

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

/* 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;
  }
}

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