Flexboxの「内容を正当化」が機能しない

Question

私は単純なFlexboxフッターを持っています。画面が580px以下になると、レイアウトは次のように変わります。

私は2つの主要な問題があります。<ul>上の正当化-contentプロパティが確実に子要素があるべき、私は<ul>display: flex項目を加えた場合でキックするようには思えない

1. をフレックスアイテム、いいえ？フッターのモバイル版では、<li>のアイテムは右側に固定されています。

2. なぜモバイルサイドのコンテナ（モバイルビューのボトムアイテムに切り替える）がモバイルサイズの兄弟よりもはるかに大きいですか？このアイテムに追加の余白や高さの値はありません。

**注 - 何が起こっているのかを簡単に確認できるように、すべての要素の周りに1ピクセルの境界線を配置しました。モバイルビューで「右位置合わせ」に関する

* { 
 
    border: 1px solid black; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
footer { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    background: red; 
 
    box-sizing: border-box; 
 
    padding: 1rem; 
 
} 
 

 
.footer-inner { 
 
    background: blue; 
 
    width: 30%; 
 
    display: flex; 
 
    align-items: center; 
 
    padding: 1rem; 
 
    color: white; 
 
} 
 

 
#footerright { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
} 
 

 
#footerright ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
    justify-content: flex-end; 
 
} 
 

 
#footerright ul li { 
 
    padding: 0px 10px; 
 
    color: white; 
 
} 
 

 
@media screen and (max-width: 580px) { 
 
    footer { 
 
    flex-direction: column; 
 
    align-items: center; 
 
    } 
 
    .footer-inner { 
 
    justify-content: center; 
 
    min-width: 240px; 
 
    } 
 
    #footerright { 
 
    justify-content: center; 
 
    } 
 
    #footerright ul { 
 
    justify-content: center; 
 
    } 
 
}

<footer> 
 
    <div class="footer-inner" id="footerleft">&copy<span id="footer-year">Year</span>&nbspThe Company</div> 
 
    <div class="footer-inner" id="footerright"> 
 
    <ul> 
 
     <li id="facebook">Twi</li> 
 
     <li id="instagram">Fac</li> 
 
     <li id="twitter">Ins</li> 
 
    </ul> 
 
    </div> 
 
</footer>

View on CodePen

Answer 1

に#footerright > ul内justify-content: centerプロパティを置き換えることで、あなたの問題を解決することができますモバイル側のサイズの兄弟である よりもはるかに大きくなります。

場合stretch非モバイルサイズにフレックス行アイテムのalign-itemsキックのデフォルト値で、同じ行の項目が均等に高いする、ラップされたときにケースされていない、またはのでflex コラムの方向を使用して、マージン、ボーダー、パディング、およびコンテンツに基づいて、それぞれの高さに折り畳まれます。この場合

あなたはulからプリセットパディング/マージンを削除する場合は、例えばに基づいているが、それは、彼らが同じ高さを持っているように見えますliのサイズに崩壊します異なるフォントサイズなどを使用すると、再び不等になる可能性があります。

---

フレキシボックスも小さな左の世話をするマージン/パディングリセット（ul {margin: 0; padding: 0;}）がulオフセット

に動作していない「コンテンツ両端揃え」の両方の携帯に、苦しみますモバイルビューではなく、モバイルビューではより明白ですが、私もあなたが意味するものはです。justify-contentはで始まると思われません。

Answer 2

：中心からの水平オフセットを引き起こすul Sのデフォルトのパディングを回避するulにpadding-left: 0;を追加ポジション。

そして第二の容器の大きさについて：ある

https://codepen.io/anon/pen/GOQwBV

Answer 3

一部のブラウザでは、デフォルトの「ユーザーエージェントスタイルシート」を持って、デフォルトのパディングとマージンをリセットするために.footer-innerと#footerright ulからmargin: 0にpadding: 0を追加ページ上の要素に適用されるデフォルトスタイル。あなたが見ることができるように、前に、あなたul後に追加されたマージン、ここであなたが説明した移動問題の原因がある

-webkit-margin-before: 1em; 
-webkit-margin-after: 1em; 
-webkit-padding-start: 40px; 

：Webkitのでは、ブラウザはul影響を与えているあなたのスタイルにいくつかのプロパティが追加されますulは、その兄弟よりも背が高い。あなたの内容を右にシフトしているパディングもあります。

これらのスタイルをリセットするには、あなただけのように同じようにゼロに、それらのデフォルト値を設定する必要があります。

#footerright ul { 
    -webkit-margin-before: 0; 
    -webkit-margin-after: 0; 
    -webkit-padding-start: 0; 
    padding-left: 0; 
    margin-top: 0; 
    margin-bottom: 0; 
} 

注：あなたは「は、上記-webkit-ルールをリセットするためにあなたをを必要としませんまた、padding-left、margin-top、およびmargin-bottomをリセットするだけで問題ありません。

Answer 4

右側があるなぜあなたは、基本的なCSSブラウザのリセット（同じ高さの問題）を追加し、align-items: center

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
} 
 

 
html, body { 
 
    width: 100%; 
 
} 
 

 
footer { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    background: red; 
 
    box-sizing: border-box; 
 
    padding: 1rem; 
 
} 
 

 
.footer-inner { 
 
    background: blue; 
 
    width: 30%; 
 
    display: flex; 
 
    align-items: center; 
 
    padding: 1rem; 
 
    color: white; 
 
} 
 

 
#footerright { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
} 
 

 
#footerright ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
    justify-content: flex-end; 
 
} 
 

 
#footerright ul li { 
 
    padding: 0px 10px; 
 
    color: white; 
 
} 
 

 
@media screen and (max-width: 580px) { 
 
    footer { 
 
    flex-direction: column; 
 
    align-items: center; 
 
    } 
 
    .footer-inner { 
 
    justify-content: center; 
 
    min-width: 240px; 
 
    } 
 
    #footerright { 
 
    justify-content: center; 
 
    } 
 
    #footerright > ul { 
 
    /*justify-content: center;*/ 
 
    align-items: center; /* because of the changed direction this is now horizontal alignment/centering */ 
 
    } 
 
}

<footer> 
 
    <div class="footer-inner" id="footerleft">&copy<span id="footer-year">Year</span>&nbspThe Company</div> 
 
    <div class="footer-inner" id="footerright"> 
 
    <ul> 
 
     <li id="facebook">Twi</li> 
 
     <li id="instagram">Fac</li> 
 
     <li id="twitter">Ins</li> 
 
    </ul> 
 
    </div> 
 
</footer>