要素を横並びにしたいならこれで決まり!flexboxの使い方!

flexboxicon 未分類
flexboxicon

要素を横並びにしてメニューバーを作りたい!

画像を左、説明文を右といったレイアウトにしたい!

そんなときflexboxが大活躍します。

 

でも何をどう設定すれば自分の望んだレイアウトになるのかわからないって言う方は結構多いんじゃないでしょうか。

この記事ではflexboxの使い方と、flexboxに何をどう設定すればどんなレイアウトになるのかをわかりやすく説明します。

 

この記事を読めばこんなことがわかる

flexboxに何をどう設定すれば自分の望んだレイアウトになるのかすぐにわかる

flexboxの文法、書き方

flexboxを使用するには以下の2つの要素が必要となります。

  • 親要素
  • 子要素

 

1:親要素を作る

htmlにて親要素を製作します。子要素とは並べ替える実際のアイテム(要素)のことで、そのアイテム(要素)の範囲を決めるためdivなどで囲い、親要素を作ります。

flexboxの使い方要素関係

flexboxの使い方要素関係

2:cssでflxe指定やプロパティの設定を行う。

 

 

記載の仕方

htmlにて並び替えをしたい要素をdivで囲い範囲指定をします。

この場合itemをcontainerで囲っているので、containerが親要素、itemが子要素となります。

 

htmlの準備ができたらcssでプロパティの設定をします。

親要素であるcontainerへdisplay:flxe;と記載することで親要素に囲まれたアイテム(子要素)にlfexboxが適用されます。

 

ではまずdisplay:flxe;を当てない状態だとどうなるか見てみましょう。

 

divタグで囲ったものはブロック要素として認識されるのでアイテム(子要素)が縦に並んでしまいます。

ですがcssにて親要素containerにdisplay:flxe;を当てるとアイテム(子要素)が横に並ぶようになります。

次に、プロパティを設定して少し複雑なデザインに変更してみましょう。

プロパティ一覧

プロパティーは大きく2つに分けられ、

  • 親要素に指定するプロパティー
  • 子要素に指定するプロパティー

が存在します。

 

普通にしようするぶんにはほとんど親要素に指定するプロパティーしか使用しません。

親要素に指定するプロパティーは子要素全体に影響するプロパティーで、全体の要素の並び方を指定する際に使用します。

子要素に指定するプロパティーは、各要素個別に何かほどこしたいときに使用します。

より複雑のデザインの場合に使用することが多いです。

親要素に指定するプロパティー一覧

親要素にdisplay:flex;が適応されていないと反映されないのでご注意ください。

 

  • アイテムの並び方を変更するflex-direciton
  • アイテムを右寄せ、左寄せ、中央に配置するjustify-content
  • アイテムを上揃え、下揃え、中央揃えに配置するalign-items
  • アイテムを折り返すflex-wrap
  • 複数行になった時の縦方向の並びを指定するalign-content

アイテムの並び方を変更するflex-direction

  • row(デフォルト)

アイテムを左から右に向かって横向きに配置します。

 

flex要素の並び順_flex-direction_row


  • row-reverse

アイテムを右から左に向かって横向きに配置します。

 

flex要素の並び順flex-direction_row-reverse


  • column

アイテムを上から下に縦向きに配置します。

 

flex要素の並び順flex-direction_column


  • column-reverse

アイテムを下から上に縦向きに配置します。

 

flex要素の並び順flex-direction_column-reverse

 


 

カスタムbox(値を変更することで並び方が変わります)

コードをコピーして貼り付けることでそのまま使用できます!


アイテムを右寄せ左寄せ中央に配置するjustify-content

  • flex-start(デフォルト)

アイテムを左寄せにする。

 

flex要素の並び順flex-content_flex-start

flex要素の並び順flex-content_flex-start


  • flex-end

アイテムを右寄せにする。

(この時並び順は左から右になる。もし左から右にしたければflex-direction:row-reverse;を指定する必要がある)

 

flex要素の並び順flex-content_flex-end

flex要素の並び順flex-content_flex-end


  • center

アイテムを中央寄せにする。

 

flex要素の並び順flex-content_center

flex要素の並び順flex-content_center


  • space-between

最初と最後ののアイテムを両端に配置し、残りを等間隔で配置する。

 

flex要素の並び順flex-content_space-between

flex要素の並び順flex-content_space-between


  • space-around

全てのアイテムを等間隔で配置する。

 

flex要素の並び順flex-content_space-around

flex要素の並び順flex-content_space-around


カスタムbox(値を変更することで並び方が変わります)

コードをコピーして貼り付けることでそのまま使用できます!


 

アイテムを上揃え下揃え中央揃えにするalign-items

  • stretch(デフォルト)

親要素の高さ、または一番大きい子要素の高さに合わせて子要素を拡大して配置。

 

flex要素の並び順align-items_stretch

flex要素の並び順align-items_stretch


  • flex-start

上揃え。要素のトップラインで揃える。

 

 

flex要素の並び順align-items_start

flex要素の並び順align-items_flex-start


  • flex-end

下揃え。要素のアンダーラインで揃える。

 

 

flex要素の並び順align-items_end

flex要素の並び順align-items_flex-end


  • center

中央揃え。

 

flex要素の並び順align-items_center

flex要素の並び順align-items_center


  • baseline

ベースラインで揃えて最初の子要素の位置に配置。

 

flex要素の並び順align-items_baseline

flex要素の並び順align-items_baseline



アイテムを折り返すflex-wrap

  • nowrap(デフォルト)

折り返しません。

子要素に幅を指定しており、子要素を横に並べた時、親要素からはみ出る場合は子要素が縮んで親要素に収まるように配置されます。

 

flex要素の並び順_flex-wrap_nowrap

flex要素の並び順_flex-wrap_nowrap


  • wrap

子要素に幅を指定しており、子要素を横に並べた時、親要素からはみ出る場合は折り返して複数行にします。

 

flex要素の並び順flex-wrap_wrap

flex要素の並び順flex-wrap_wrap


  • wrap-revers

折り返して下から上に並べます。

 

flex要素の並び順flex-wrap_wrap-revers

flex要素の並び順flex-wrap_wrap-revers

 

wrapは親要素から子要素がはみ出る場合に折り返しをします。

下のデモは各子要素の幅を100pxにしてあります。

親要素の幅も350px、250px、150pxと変更できるので、親要素の幅で子要素がどう配置されるのかを試してみてください。wrapを指定していれば、親要素の幅に合わせて折り返してくれるはずです。

wrapを指定しておけばpc表示からスマホ表示になっても自動で配置を適切に切り替えてくれるからレスポンシブサイトを作る時によく使われるよ。



子要素の幅を100pxに指定しています。

 

複数行になった時の縦方向の並びを指定するalign-content

  • stretch(デフォルト)

親要素の高さに合わせて子要素が拡大されて配置。

 

flex要素の並び順align-content_streatch

flex要素の並び順align-content_stretch


  • flex-start

上揃え。

 

flex要素の並び順align-content_flex-start

flex要素の並び順align-content_flex-start


  • flex-end

下揃え。

 

flex要素の並び順align-content_flex-end

flex要素の並び順align-content_flex-end


  • center

中央揃え。

 

flex要素の並び順align-content_center

flex要素の並び順align-content_center


  • space-between

一番上の行と一番下の行を上下に配置し、のこりの行を等間隔で配置。

 

flex要素の並び順align-content_space-between

flex要素の並び順align-content_space-between


  • space-around

全ての行を等間隔で配置。

 

flex要素の並び順align-content_space-around

flex要素の並び順align-content_space-around

 

align-contentはwrapを有効にしていないと適応されません。



 

 

 

子要素に指定するプロパティー一覧

親要素にdisplay:flex;が指定されていないと反映されないので注意してください。

子要素一つ人つに設定を行うプロパティーですので全体ではなく各アイテムそれぞれを細かく位置決めすることができます。

 

  • 子要素の並びを指定するorder
  • 子要素の伸びる比率を指定するflex-grow
  • 子要素の縮む比率を指定するflex-shrink
  • 子要素のべース幅を指定するflex-basis
  • 子要素それぞれの垂直方向の位置を指定するflex-self

子要素の並び順を指定するorder

基本はhtmlでの記載順だが任意のページでは違う並べ方をしたい、レコメンドの順番を変えたい。などある時に使われます。

子要素のidまたはclass名+本来の並び順の番号をセレクタ部分に記載して、{}ないにorder+変更後の順番号を記載します。

  • order:1or2or3・・・

 

flex要素の並び順order

flex要素の並び順order

子要素の伸びる比率を指定するfelx-grow 子要素の縮む比率を設定するfelx-shrink

ヘッダー部分の・ロゴ・サイト名・メニューバーのエリアを作る際、ブラウザを拡大縮小したときにどのようなデザインにするかを設定するのによく使われます。

指定した数字の比率で伸び縮みします。

  • flex-grow1or2or3・・・
  • felx-shrink1or2or3・・・

 

flex要素の並び順flex-grow

flex要素の並び順flex-grow

 

子要素のベースの幅を指定するflex-basis

上記のflex-grow,shrinkは親要素が伸び縮みしたらどうするか設定するプロパティでした。ということは伸び縮みする前の元が必ずあります。

その元(ベース)の状態での子要素の幅を設定するのがflex-basisです。

ヘッダー部分の・ロゴ・サイト名・メニューバーのエリアを作るときによく使用されます。

  • flex-basis10%or20%or30%・・・

 

flex要素の並び順flex-basis

flex要素の並び順flex-basis

 

子要素それぞれの垂直方向の位置を指定するalign-self

上下中央揃えをするalign-itemsとは違い、子要素それぞれを上、下、中央どちらに配置をするかを指定するプロパティーです。

  • align-self

auto:align-itemsの値を継承
start:上
end:下
center:中央
baselne:ベースライン
stretch:上下に余白があれば伸びて配置

 

flex要素の並び順flex-self

flex要素の並び順align-self

コメント

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