Web筋トレも使っているサーバー!ロリポップを使ってみない?

Flexboxの使い方まとめ

Sponser Link

FlexboxはCSS3から使用できる新しいCSSです。

フレキシブルで簡単にレイアウトが今までより少ないコードで、

実装することができます。

Sponser Link

Flexboxの書き方

Sponser Link

FlexboxのHTML

複数の要素をboxで囲います。

Sponser Link

FlexboxのCSS

まず、boxにFlexコンテナーを定義

インライン要素の場合

Sponser Link

Flexboxコンテナーに指定するプロパティ

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items

flex-direction

子要素をどの方向に配置していくかを指定するプロパティー。

使える値

row(初期値) 子要素を左から右に配置されます。
row-reverse 子要素を右から左に配置されます。
column 子要素を上から下に配置されます。
column-reverse 子要素を下から上に配置されます。

flex-wrap

子要素を一行、または複数行に並べるかを指定します。

使える値

nowrap(初期値) 子要素を折り返しせず、一行に配置されます。
wrap 子要素を折り返し、複数行に上から下へ配置されます。
wrap-reverse 子要素を折り返し、複数行に下から上へ配置されます。

flex-flow

flex-directionとflex-wrapをまとめて指定できるプロパティです。

justify-content

flexコンテナーに空きスペースがあった場合、水平方向のどの位置に配置するかを指定します。

使える値

flex-start(初期値) 行の開始位置から配置。左揃え。
flex-end 行末から配置。右揃え。
center 中央揃え
space-between 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
space-around 両端の子要素も含め、均等に間隔をあけて配置

align-items

flexコンテナーに空きスペースがあった場合、垂直方向のどの位置に配置するかを指定します。

使える値

stretch(初期値) 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
flex-start 親要素の開始位置から配置。上揃え。
flex-end 親要素の終点から配置。下揃え。
center 中央揃え
baseline ベースラインで揃える

align-content

子要素が複数行に渡った場合の垂直方向の揃えを指定します。

使える値

stretch(初期値) 親要素の高さに合わせて広げて配置
flex-start 親要素の開始位置から配置。上揃え。
flex-end 親要素の終点から配置。下揃え。
center 中央揃え
space-between 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置
space-around 上下端にある子要素も含め、均等に間隔をあけて配置
Sponser Link

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

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order

子要素を任意の順で並べ替えられます。

flex-grow

親要素にスペースがある場合、子要素が他の子要素に対してどれくらい伸びるかを指定します。

flex-shrink

flex-growと逆で、親要素にスペースがなく子要素が入り切らない場合、指定のある子要素が他の子要素に対してどれくらい縮むかを指定します。

flex-basis

widthと同じように幅の値を指定できます。autoと指定した場合は子要素のコンテンツのサイズが適応されます。

flex

flex-grow、flex-shrink、flex-basis の3つのプロパティーを一行で指定できます。

初期値は 0(flex-grow) 1(flex-shrink) auto(flex-basis)です。

align-self

親要素に高さにスペースがある場合、子要素を垂直方向のどの位置に配置するかを指定します。
flexコンテナに指定するalign-itemsと同じ機能ですが、こちらに指定がある場合は、align-itemsよりも優先されます。

使える値

auto(初期値) 親要素の align-items の値を継承
stretch 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
flex-start 親要素の開始位置から配置。上揃え。
flex-end 親要素の終点から配置。下揃え。
center 中央揃え
baseline ベースラインで揃える
Sponser Link

まとめ

私はグローバルナビゲーションで使ったりします。

Flexboxってとっても便利だなと思うのですが、

LPのコーディングを見てると

意外とfloatを使っていることが多いんですよ。

LPのコーディングでFlexbox使っているのが見つかったら、

ご紹介したいと思います。

 

 

Sponser Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA