Q&A
display: flex;
justify-content: flex-end;
これは、フレックスボックスに適用するべきスタイルなので、中身のアイテムに適用するのは間違っていると思います。
全体の構成を見直されてはいかがでしょうか。
実現したいこと
ナビゲーションバーにおいて、
テキストボックス/検索ボタン ブランド/ホーム/リンク１/リンク２
という並びにしたい
#現状
「ブランド」のみが右寄せできません。
また、ウィンドウ幅が縮むと、
のように、ホーム・リンク１・リンク２が折りたたみメニュー内に格納されるようにしたく、この場合ブランドは意図通りに右寄せになります。
#試したこと
ブランドと、他３つの要素に、display: flex; と justify-content: flex-end;を指定したのですが、ブランドに効きませんでした。
以下、コードになります。
html
1<body> 2 <!--検索窓・検索ボタン・・・ブランド・メニューテキスト右寄せ --> 3 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 4 <form class="form-inline my-2 my-lg-0 mr-auto"> 5 <input type="text" class="form-control mr-sm-2" placeholder="検索・・・"> 6 <button class="btn btn-outline-success my-2 my-sm-0" type="button">検索</button> 7 </form> 8 <a href="#" class="navbar-brand flex-end">ブランド</a> 9 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForm"> 10 <span class="navbar-toggler-icon"></span> 11 </button> 12 13 <div class="collapse navbar-collapse flex-end" id="navbarForm"> 14 <div class="navbar-nav"> 15 <a href="#" class="nav-item nav-link">ホーム</a> 16 <a href="#" class="nav-item nav-link">リンク１</a> 17 <a href="#" class="nav-item nav-link">リンク２</a> 18 </div> 19 </div> 20 </nav> 21</body>
CSS
1.flex-end{ 2 display: flex; 3 justify-content: flex-end; 4}
どこが誤りかご指摘いただけると有難いです。宜しくお願いいたします。
他３つの要素->2つじゃね？
すみません、display: flex;は、親要素に対して指定するべきものでした。
そうなると、a要素とdiv.collapse要素が、右寄せしたい要素ということになるので、それら２つを別なdivで囲って、そのdivに対してdisplay:flex;でしょうか。
回答1件
0
ベストアンサー
Bootstrap4.3を使用する前提で回答します。
html
1<div class="collapse navbar-collapse flex-end" id="navbarForm">
上記のクラスにflex-grow-0を追加して下記のようにすれば解決すると思います。
html
1<div class="collapse navbar-collapse flex-grow-0" id="navbarForm">
尚、flex-endというカスタムクラスは不要です。
投稿2019/03/05 11:53
総合スコア1899
ご回答ありがとうございます。
ご提示いただいた内容で書くと、望んだ形になりました。
ですが、flex-growの意味するところが良くわかりません。
https://dekiru.net/article/13237/
を見たのですが、
「フレックスアイテムの伸び率を他のアイテムとの相対値（整数）で指定します。」とありました。
上記コードは、div.navbar-collapseがフレックスアイテムであり、他のアイテムとの相対値を０にしている、という意味かと推測しますが、0だと伸びもせず初期位置のまま、ではないのでしょうか…それが右寄せになる理由が分かりません。
.navbarがflexになっていて、その子要素となっている.navbar-collapseにはflex-grow: 1が指定されているので、それを解除した形です。こうすることによってform.form-inline（これもflex）が右に張り出した結果ほかの要素が右寄せになったわけです。
ご回答ありがとうございます。
>.navbarがflexになっていて
>その子要素となっている.navbar-collapseにはflex-grow: 1が指定されている
⇒こちらは、私は特に指定していないのでデフォルトでそうなる仕様、ということでよろしいでしょうか。
>その子要素となっている.navbar-collapseにはflex-grow: 1が指定されているので
⇒flex-grow:1となっている要素がひとつしか無い場合、親要素内のフリースペースをめいっぱい占拠する形で広がるので、flex-grow:0とすることで、めいっぱい広がるのをやめさせて、
form.form-inlineで指定したmr-autoが作用して、div.collapse要素が右に寄せられた、
という理解でよろしいでしょうか。
.navbar-collapseにflex-grow: 1が指定されているのはBootstrapの仕様です。
> form.form-inlineで指定したmr-autoが作用して、div.collapse要素が右に寄せられた、
という理解でよろしいでしょうか。
その通りです。
ご回答ありがとうございます。flex-growの存在がこの先も引っかかりそうな気がしますが、
とりあえず今回は、教えていただいたやり方で、右寄せが実現できる！ということが分かりましたので先に進みたいと思います。
あなたの回答
tips
プレビュー
