縦と横のアイコンのサイズを変更Navbarの横の向き

Question

モバイルアプリケーションでは、メニューオプション付きのブートストラップnavbarを使用しています。それはそれぞれ肖像画や風景のように見えます。

ポートレート：

景観：

私がやろうとしています何がunifromlyしようとした任意のorientation.Iで配布ナビゲーションバーの内側のli要素を取得することです方向が変更された後でも均等に間隔が取れるように、ナビゲーションバー内のアイテムに左右のパディングを与えます。問題は、より多くのli要素を追加したり、いくつかの要素を削除したりすると、均一に分布していないということになります。 navbar内のアイコンを任意の方向に一様に分布させることができる他のオプション。

Answer 1

フレックスボックスを試しましたか？ここ

ul{ 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    display: flex; 
    -webkit-box-pack: space-around; 
    -ms-flex-pack: space-around; 
    justify-content: space-around; 
} 

は一例であり：https://jsfiddle.net/scrfrmLk/

Answer 2

これはflexboxと幾分自明です。

display: flexを容器に加えます。次に、均一な水平スペーシングをjustify-content: space-betweenとすることができます。縦方向にも中央に配置する場合は、align-items: centerを追加します。

space-betweenは、最初と最後の要素を側面に保持しますが、space-aroundは保持しません。あなたが好きなものを選んでください。

例：

.container { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #333; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 

 
.icon { 
 
    width: 30px; 
 
    height: 30px; 
 
    margin: 0 10px; 
 
    border-radius: 15px; 
 
    background: #fff; 
 
}

<div class="container"> 
 
    <div class="icon"></div> 
 
    <div class="icon"></div> 
 
    <div class="icon"></div> 
 
    <div class="icon"></div> 
 
    <div class="icon"></div> 
 
</div>