flexアイテムの一つだけを端に寄せたい

コーディング
スポンサーリンク

display:flexで横並びにした要素の一つだけを端に寄せたい

ヘッダーなどでよく使われるデザインです。
一見簡単そうに見えますが、display:flexでやってみると初め少し手間取りました。

 

flexアイテムの一つだけを端に寄せる方法

 

display:flexで横並びにした状態

色の設定などのCSSは省いています。

ボックスの親要素にdisplay:flexを設定したベーシックな状態です。
これのボックス3だけを右端に寄せます。

 

justify-contentで小要素の並び方を設定?

フレックスアイテムの横への並び方を設定するCSSはいくつかあります。
justify-content: space-between;は小要素がお互い間を取って等間隔に並ぶ便利なCSSですが、これを使うと要素が全体に広がってしまいます。

 

flex-boxにjustify-selfは効かない?

初めてこのデザインにコーディングするとき、「端に寄せたい要素にだけjustify-selfすればいい」と思いましたが、
小要素であるflexアイテムにjustify-selfは効きません。
ややこしいですね・・・。

指定のflexアイテムへmargin-left:auto;で右端に寄せる


ボックス3に対してmargin-left:auto;で右端に寄せることで思い通りの動きになります。

個別にjustify-selfを設定したい小要素にはmargin-right/margin-leftで幅を寄せることを覚えておきましょう。

コメント

タイトルとURLをコピーしました