web系エンジニアを目指す私、siが学習のアウトプットをメインにプログラミングについての記事を書いていきます。

【CSS】Flexで使用出来る全てのプロパティについて一覧で解説します!

 
この記事を書いている人 - WRITER -

 

こんにちは!

web系エンジニアを目指して学習中のsiと申します^ ^

 

この記事の対象者

  • Flexってなに?って方
  • Flexの全てのプロパティを確認したい方
  • Flexの各プロパティの使い方を知りたい方

 

Flexとは

Flexとは正式名称を「Flexible Box Layout Module」と言う、レイアウトモジュールのことです。

Flexを使うことで、要素を横並びや縦並びにすることが出来て、簡単にレイアウトを組むことが出来ます。

 

また、Flexを使うためには親要素に対してdisplay: flex;を指定する必要があります。

display: flex;を指定した親要素のことをコンテナと呼び、中の子要素のことをアイテムと呼びます。

 

Flexが出る前はfloatがよく使われていました。また、Gridと呼ばれるレイアウトモジュールもFlexと並んでよく使用されています。

 

Flexでは親要素と子要素で指定出来るプロパティが異なります。

以下で、全てのプロパティについて解説しているので、さっそく見ていきましょー!

 

親要素(コンテナ)に指定できるプロパティ

 

flex-direction

アイテムを並べる向きを指定するプロパティ

 

row (デフォルト)

横方向に左から右へ配置されます

See the Pen
flex row
by si (@s158)
on CodePen.

 

column

縦方向に上から下へ配置されます

See the Pen
Untitled
by si (@s158)
on CodePen.

 

row-reverse

横方向に右から左へ配置されます

See the Pen
flex row-reverse
by si (@s158)
on CodePen.

 

column-reverse

縦方向に下から上へ配置されます

See the Pen
flex column-reverse
by si (@s158)
on CodePen.

 

flex-wrap

アイテムの折り返しを指定するプロパティ

 

wrap

上から下へ折り返します

See the Pen
flex row wrap
by si (@s158)
on CodePen.

 

wrap-reverse

下から上へ折り返します

See the Pen
flex row reverse
by si (@s158)
on CodePen.

 

flex-flow

flex-direction、flex-wrapの順番で一括指定できるショートハンド

See the Pen
Untitled
by si (@s158)
on CodePen.

 

justify-content

横方向に対するアイテム位置を指定するプロパティ

 

flex-end

アイテムを右揃えで配置します

See the Pen
flex jusutify-content flex-end
by si (@s158)
on CodePen.

 

center

アイテムを中央揃えで配置します

See the Pen
flex justify-content center
by si (@s158)
on CodePen.

 

space-between

両橋のアイテムを余白を空けずに端に配置して、その他のアイテムを均等な間隔を空けて配置します

See the Pen
flex justify-content space-between
by si (@s158)
on CodePen.

 

space-around

全てのアイテムを均等な間隔を空けて配置します

See the Pen
flex justify-content space-between
by si (@s158)
on CodePen.

 

align-items

縦方向に対するアイテム位置を指定するプロパティ

 

stretch (デフォルト)

アイテムを上下いっぱいまで広げます

See the Pen
flex align-items stretch
by si (@s158)
on CodePen.

 

flex-start

アイテムを上揃えで配置します

See the Pen
flex align-items flex-start
by si (@s158)
on CodePen.

 

flex-end

アイテムを下揃えで配置します

See the Pen
flex align-items flex-end
by si (@s158)
on CodePen.

 

center

アイテムを中央揃えで配置します

See the Pen
flex align-items center
by si (@s158)
on CodePen.

 

baseline

アイテムをベースラインに揃えて配置します

See the Pen
flex align-items baseline
by si (@s158)
on CodePen.

 

align-content

縦方向に対する複数行のアイテム位置を指定するプロパティ

 

stretch(デフォルト)

親要素の大きさに合わせて間隔を自動調整します

See the Pen
flex align-content
by si (@s158)
on CodePen.

 

flex-start

アイテム行を上揃えで配置します

See the Pen
flex align-content flex-start
by si (@s158)
on CodePen.

 

flex-end

アイテム行を下揃えで配置します

See the Pen
flex align-content flex-end
by si (@s158)
on CodePen.

 

center

アイテム行を上下中央揃えで配置します

 

See the Pen
flex align-content flex-end
by si (@s158)
on CodePen.

 

space-between

一番上と一番下のアイテム行が上下に余白を空けずに配置され、その他のアイテム行は均等な間隔を空けて配置される

See the Pen
Untitled
by si (@s158)
on CodePen.

 

space-around

全てのアイテム行が均等な間隔を空けて配置されます

See the Pen
flex align-content space-around
by si (@s158)
on CodePen.

 

 

子要素(アイテム)に指定できるプロパティ

 

order

HTMLの記述に関わらず、アイテムの並び順を指定できるプロパティ

See the Pen
flex order
by si (@s158)
on CodePen.

 

align-self

アイテム1つ1つの縦方向の位置を指定するプロパティ

親要素にalign-itemsが指定されていて、子要素にalign-selfを指定している場合は、align-selfの値が優先されます。

See the Pen
flex align-self
by si (@s158)
on CodePen.

 

flex-grow

親要素の残り幅をどの割合で分け与えるかを指定するプロパティ

See the Pen
flex flex-grow
by si (@s158)
on CodePen.

「item1」には1、「item2」には2、「item3」には1を指定しているため、

1:2:1の割合で残り幅を分け与えています。

そのため、「item2」が他アイテムに比べて幅が大きくなっています。

 

flex-shrink

アイテム幅が親要素を超えたときに、どの割合で縮ませるかを指定するプロパティ

See the Pen
flex flex-shirink
by si (@s158)
on CodePen.

「item1」には1、「item2」には2、「item3」には3を指定しているため、

1:2:3の割合で超えた幅分を縮ませています。

そのため、「item1」item2」「item3」の順番でアイテム幅が小さくなっています。

 

flex-basis

アイテムの幅を指定するプロパティ

基本的にはwidthと同じ働きをします。flex-basisとwidthを両方指定した場合は、flex-basisの値が優先されます。

See the Pen
flex flex-basis
by si (@s158)
on CodePen.

 

flex

flex-grow、flex-shrink、flex-basisの順番で一括指定できるショートハンド

See the Pen
flex flex
by si (@s158)
on CodePen.

 

まとめ

 

  • Flexを使うことで簡単にレイアウトを組むことが出来る
  • Flexでは親要素のことをコンテナ、子要素のことをアイテムと呼ぶ
  • 親要素と子要素で使用出来るプロパティが異なる
  • 様々なプロパティを駆使することで、柔軟なレイアウトを組むことが出来る

 

参考記事

 

 

この記事を書いている人 - WRITER -

- Comments -

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

CAPTCHA


Copyright© .i DO WHAT I WANT , 2022 All Rights Reserved.