フレックスボックスに並んでいる3つの要素

Question

flexboxを使って3つの要素を並べて配置しようとしていますが、align-selfのプロパティは効果がありません。左端の要素（#site-logo）が常に存在するとは限りませんので、各要素を個別に配置する必要があるため、space-aroundまたはspace-betweenを親要素（#subnav-cont）に使用していません。

は #site-logoは #site-linksがその親との関係を中心にする必要があり、一番左（ 存在）の上に座る必要があり、おさらいするために、そして #nav-socialは右端に座る必要があります。

デモ：http://codepen.io/ourcore/pen/jyBNzZ

#subnav { 
 
    z-index: 99999999; 
 
    width: 100%; 
 
    overflow: auto; 
 
    font-size: 1.1rem; 
 
    background-color: yellow; 
 
} 
 
#subnav #subnav-cont { 
 
    display: flex; 
 
    margin: 0 auto; 
 
    padding: 0 1.5%; 
 
    max-width: 1280px; 
 
    background-color: red; 
 
} 
 
#subnav #subnav-cont #site-logo { 
 
    align-self: flex-start; 
 
    padding: 10px 0; 
 
    height: 50px; 
 
} 
 
#subnav #subnav-cont #site-logo img { 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 30px; 
 
} 
 
#subnav #subnav-cont > ul li { 
 
    display: inline-block; 
 
    padding: 0 20px; 
 
    height: 50px; 
 
    font-size: 1em; 
 
    line-height: 50px; 
 
    white-space: nowrap; 
 
} 
 
#subnav #subnav-cont #nav-links { 
 
    align-self: center; 
 
} 
 
#subnav #subnav-cont #nav-social { 
 
    align-self: flex-end; 
 
} 
 
#subnav #subnav-cont #nav-social li { 
 
    padding: 0 5px; 
 
}

<nav id="subnav"> 
 
    <div id="subnav-cont"> 
 
    <div id="site-logo"> 
 
     <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> 
 
    </div> 
 
    <ul id="nav-links"> 
 
     <li> 
 
     <a href="#" class="subnav-link">Link</a> 
 
     </li> 
 
     <li> 
 
     <a href="#" class="subnav-link">Link</a> 
 
     </li> 
 
     <li> 
 
     <a href="#" class="subnav-link">Link</a> 
 
     </li> 
 
     <li> 
 
     <a href="#" class="subnav-link">Link</a> 
 
     </li> 
 
    </ul> 
 
    <ul id="nav-social"> 
 
     <li> 
 
     <a href="#" class="icon-facebook">Facebook</a> 
 
     </li> 
 
     <li> 
 
     <a href="#" class="icon-twitter">Twitter</a> 
 
     </li> 
 
     <li> 
 
     <a href="#" class="icon-instagram">Instagram</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

Answer 1

あなたはjustify-selfを探していたが、それはフレキシボックスに存在しません。 align-selfは、交差軸で動作します。あなたは#subnav-con内の中心に位置することが#nav-linksが必要な場合は関係なく、他の二つの要素が存在しており、それらの幅場合、

#nav-links { 
    margin: auto; 
} 

codepen

：

はこれを試してみてください。他の調整と一緒にposition: absolute;に設定することができます。この場合

#nav-links { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%); 
} 

codepen

Answer 2

align-self

垂直項目を調整します。

これはあなたが探しているものですか？また

、これが適切に動作するため、#site-logoと#nav-social同じ幅である必要がある、そうでない場合、別の方法で配置される#nav-linksニーズ、すなわちposition: absolute

#subnav { 
 
    z-index: 99999999; 
 
    width: 100%; 
 
    overflow: auto; 
 
    font-size: 1.1rem; 
 
    background-color: yellow; 
 
} 
 
#subnav #subnav-cont { 
 
    display: flex; 
 
    margin: 0 auto; 
 
    padding: 0 1.5%; 
 
    max-width: 1280px; 
 
    background-color: red; 
 
} 
 
#subnav #subnav-cont #site-logo { 
 
    flex: 1; 
 
    padding: 10px 0; 
 
    height: 50px; 
 
    /*visibility: hidden;*/ 
 
    text-align: left; 
 
} 
 
#subnav #subnav-cont #site-logo img { 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 30px; 
 
} 
 
#subnav #subnav-cont > ul li { 
 
    display: inline-block; 
 
    padding: 0 20px; 
 
    height: 50px; 
 
    font-size: 1em; 
 
    line-height: 50px; 
 
    white-space: nowrap; 
 
} 
 
#subnav #subnav-cont #nav-links { 
 
    flex: 2; 
 
    text-align: center; 
 
} 
 
#subnav #subnav-cont #nav-social { 
 
    flex: 1; 
 
    text-align: right; 
 
} 
 
#subnav #subnav-cont #nav-social li { 
 
    padding: 0 5px; 
 
}

<nav id="subnav"> 
 
    <div id="subnav-cont"> 
 
     <div id="site-logo"> 
 
     <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> 
 
     </div> 
 
     <ul id="nav-links"> 
 
     <li> 
 
      <a href="#" class="subnav-link">Link</a> 
 
     </li> 
 
     <li> 
 
      <a href="#" class="subnav-link">Link</a> 
 
     </li> 
 
     <li> 
 
      <a href="#" class="subnav-link">Link</a> 
 
     </li> 
 
     <li> 
 
      <a href="#" class="subnav-link">Link</a> 
 
     </li> 
 
     </ul> 
 
     <ul id="nav-social"> 
 
     <li> 
 
      <a href="#" class="icon-facebook">Facebook</a> 
 
     </li> 
 
     <li> 
 
      <a href="#" class="icon-twitter">Twitter</a> 
 
     </li> 
 
     <li> 
 
      <a href="#" class="icon-instagram">Instagram</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav>

両方