flexboxプロパティ群の説明

こんにちは tanaka です。

今回は、
flexboxプロパティ群の
説明です。

flexboxとは、
複数のボックスモデルを
並べる機能です。

画像blog-flex-box-basics78

flexboxは、
親要素にプロパティ群をいれ
子要素を並べます。


flexboxは、
ヨコ置き
タテ置き
を基本形にして
様々な並べ方ができます。

以下の画像の内容
 緑のバックスクリーン = 親要素
 四角の数字      = 子要素

ヨコ置き

画像flex-box-properties01

タテ置き

画像flex-box-properties02

ヨコ折り返し

画像flex-box-properties03

タテ折り返し

画像flex-box-properties04

文字の底辺でそろえる

画像flex-box-properties05

などがあります。


flexboxのプロパティは、
主に6種類あります。

(1)flex-direction  = ヨコ、タテを決める
(2)justify-content = 主軸の調整
(3)align-items   = 交差軸の調整(1行用)
(4)flex-wrap    = 折り返し
(5)align-content  = 交差軸の調整(2行以上用)
(6)order      = 並び順指定


flex-flow、align-selfは、
掲載しません。


flex
flex-grow
flex-shrink
flex-basis

レスポンシブ用のflexboxプロパティは、
別の記事を用意しました。

そちらをご覧ください。

レスポンシブ = スマホ、タブレット、PCなど
         画面の左右が変わっても対応できる
         ページ作りのこと。

それでは
詳しく説明していきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

flexboxプロパティ群の説明

flexboxとは

flexboxとは、
ボックスモデルを
いい感じに並べる機能です。

画像blog-flex-box-basics78

flexboxは、
display: flexを開始の合図として

flexboxのプロパティ群を
親要素へ入れることにより

そのプロパティ群の内容にしたがって
子要素が並んで行きます。

画像flex-box-properties03
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;

主なプロパティは6種類

flexboxのプロパティは、
主に6種類あります。

(1)flex-direction  = ヨコ、タテを決める
(2)justify-content = 主軸の調整
(3)align-items   = 交差軸の調整(1行用)
(4)flex-wrap    = 折り返し
(5)align-content  = 交差軸の調整(2行以上用)
(6)order      = 並び順指定

(1)flex-direction = ヨコ、タテを決める

flex-directionは、
子要素を、
ヨコに並べるか
タテに並べるか
を決めるプロパティです。

flex-directionには、
reverseという
逆向きに並べる値もありますが

特別な理由がない限り
並び順はcssではなくhtmlでやった方が良い
でしょう。

値は4つあります。
 1:row(デフォルト)= ヨコ
 2:row-reverse   = ヨコ逆
 3:column     = タテ
 4:colmn-reverse  = タテ逆

1:row(デフォルト)

row(ヨコ

画像flex-box-properties06
2:row-reverse

row-reverse(ヨコ逆)

画像flex-box-properties07
3:column

column(タテ)

画像flex-box-properties08
4:colmn-reverse

colmn-reverse(タテ逆)

画像flex-box-properties09

(2)justify-content = 主軸の調整

justify-contentは、
主軸方向の調整をするプロパティです。

主軸とは、
flex-directionで決めた方向と
同じ方向のことです。

flex-directionでヨコ方向を選んでいたら
主軸もヨコ

画像blog-flex-box-basics08

flex-directionでタテ方向を選んでいたら
主軸もタテ

画像blog-flex-box-basics09

値は6つあります。
 1:flex-start(デフォルト)= 前づけ
 2:center        = 中央
 3:flex-end       = 後づけ
 4:space-around     = 均等割もどき
 5:space-between    = 両端
 6:space-evenly     = 均等割

1:flex-start(デフォルト)

flex-start(前づけ)

画像flex-box-properties10
画像flex-box-properties11
2:center

center(中央)

画像flex-box-properties12
画像flex-box-properties13
3:flex-end

flex-end(後づけ)

画像flex-box-properties14
画像flex-box-properties15
4:space-around

space-around(均等割もどき)

画像flex-box-properties16
画像flex-box-properties17
5:space-between

space-between(両端)

画像flex-box-properties18
画像flex-box-properties19
6:space-evenly

space-evenly(均等割)

画像flex-box-properties20
画像flex-box-properties21

(3)align-items = 交差軸の調整(1行用)

align-itemsは、
交差軸方向の調整をするプロパティです。

交差軸とは、
主軸の反対のことです。

主軸がヨコなら
交差軸はタテ

画像blog-flex-box-basics54

主軸がタテなら
交差軸はヨコ

画像blog-flex-box-basics55

align-itemsは、
1行の時、使います。

flex-wrapの折り返しで
2行以上になったら、

align-content(2行以上用)を使います。


値は5つあります。
 1:stretch(デフォルト) = width、heightがautoの時に動作(auto以外は前づめ)
 2:flex-start  = 前づめ
 3:center   = 中央
 4:flex-end  = 後づめ
 5:baseline  = 文字底そろえ

1:stretch(デフォルト)

stretch(デフォルト)

すごく難しいので、
無理に使う必要はありません。

子要素のwidth、heightが
autoである
autoではない
これによって結果が変わります。

・ヨコ
  heightがauto     = stretch(上下いっぱいまで伸びる)
  heightがautoではない = flex-start

  widthがauto     = 文字の幅

画像flex-box-properties22

・タテ
  widthがauto     = stretch(左右いっぱいまで伸びる)
  widthがautoではない = flex-start

  heightがauto    = 文字の高さ

画像flex-box-properties23
2:flex-start

flex-start(前づめ)

画像flex-box-properties24
画像flex-box-properties25
3:center

center(中央)

画像flex-box-properties26
画像flex-box-properties27
4:flex-end

flex-end(後づめ)

画像flex-box-properties28
画像flex-box-properties29
5:baseline

baseline(文字底そろえ)

画像flex-box-properties30

(4)flex-wrap = 折り返し

flex-wrapは、
折り返しをするプロパティです。

子要素が範囲内であふれると
自動的に折り返されます。

flex-wrapには、
reverseという
逆向きに並べる値もありますが

特別な理由がない限り
並び順はcssではなくhtmlでやった方が良い
でしょう。

値は3つあります。
 1:nowrap(デフォルト) = 折り返しなし
 2:wrap         = 折り返し
 3:wrap-reverse     = 折り返し逆

1:nowrap(デフォルト)

nowrap(折り返しなし)

画像flex-box-properties31
画像flex-box-properties32
2:wrap

wrap(折り返し)

画像flex-box-properties33
画像flex-box-properties34
3:wrap-reverse

wrap-reverse(折り返し逆)

画像flex-box-properties35
画像flex-box-properties36

(5)align-content = 交差軸の調整(2行以上用)

align-contentは、
交差軸方向が2行以上の時
調整をするプロパティです。

2行以上でも
一塊としてあつかいたい時は
align-itemsを使います。

align-contentとalign-itemsの違い

align-content
1行、1行それぞれで動く。

align-content: flex-start;

画像flex-box-properties52

align-itemsは、
2行がワンセットとして動く。

align-items: flex-start;

画像flex-box-properties53

値は7つあります。
 1:stretch(デフォルト) = width、heightがautoの時に動作(auto以外は前づめ)
 2:flex-start    = 前づめ
 3:center     = 中央
 4:flex-end    = 後づめ
 5:space-around  = 均等割もどき
 6:space-between = 両端
 7:space-evenly  = 均等割

1:stretch(デフォルト)

stretch

すごく難しいので、
無理に使う必要はありません。

子要素のwidth、heightが
autoである
autoではない
これによって結果が変わります。

・ヨコ
  heightがauto     = stretch(上下いっぱいまで伸びる)
  heightがautoではない = flex-start

  widthがauto     = 文字の幅

画像flex-box-properties37

・タテ
  widthがauto     = stretch(左右いっぱいまで伸びる)
  widthがautoではない = flex-start

  heightがauto    = 文字の高さ

画像flex-box-properties38
2:flex-start

flex-start(前づめ)

画像flex-box-properties39
画像flex-box-properties40
3:center

center(中央)

画像flex-box-properties41
画像flex-box-properties42
4:flex-end

flex-end(後づめ)

画像flex-box-properties43
画像flex-box-properties44
5:space-around

space-around(均等割もどき)

画像flex-box-properties45
画像flex-box-properties46
6:space-between

space-between(両端)

画像flex-box-properties47
画像flex-box-properties48
7:space-evenly

space-evenly(均等割)

画像flex-box-properties50
画像flex-box-properties51

(6)order = 並び順指定

orderは、
css側で順番を指定するプロパティです。

orderは、
並べる子要素に入れて使います。

特別な理由がない限り
並び順はcssではなくhtmlでやった方が良い
でしょう。

値は数値のみです。

order: 1;
order: 2;
order: 3;

数字の小さい順番に
並んで行きます。

例)
order: 2;
order: 1;
order: 3;

画像flex-box-properties49

もし使う場合は、
並べる子要素全てに
数値を入れた方が分かりやすいでしょう。

そして、
数値も1、2、3、4、5と
順番通りにした方が良いでしょう。

まとめ

flexboxとは

flexboxとは、
複数のボックスモデルを
並べる機能。

画像blog-flex-box-basics78

flexboxは、
親要素にプロパティ群をいれ
子要素を並べる。


flexboxは、
ヨコ置き
タテ置き
を基本形にして
様々な並べ方ができます。

flexboxのプロパティは、主に6種類

flexboxのプロパティは、
主に6種類あります。

(1)flex-direction  = ヨコ、タテを決める
(2)justify-content = 主軸の調整
(3)align-items   = 交差軸の調整(1行用)
(4)flex-wrap    = 折り返し
(5)align-content  = 交差軸の調整(2行以上用)
(6)order      = 並び順指定

(1)flex-direction

flex-directionは、
子要素を、
ヨコに並べるか
タテに並べるか
を決めるプロパティです。

値は4つあります。
 1:row(デフォルト)= ヨコ
 2:row-reverse   = ヨコ逆
 3:column     = タテ
 4:colmn-reverse  = タテ逆

(2)justify-content

justify-contentは、
主軸方向の調整をするプロパティです。

主軸とは、
flex-directionで決めた方向と
同じ方向のことです。

flex-directionでヨコ方向を選んでいたら
主軸もヨコ

画像blog-flex-box-basics08

flex-directionでタテ方向を選んでいたら
主軸もタテ

画像blog-flex-box-basics09

値は6つあります。
 1:flex-start(デフォルト)= 前づけ
 2:center        = 中央
 3:flex-end       = 後づけ
 4:space-around     = 均等割もどき
 5:space-between    = 両端
 6:space-evenly     = 均等割

(3)align-items

align-itemsは、
交差軸方向の調整をするプロパティです。

交差軸とは、
主軸の反対のことです。

主軸がヨコなら
交差軸はタテ

画像blog-flex-box-basics54

主軸がタテなら
交差軸はヨコ

画像blog-flex-box-basics55

align-itemsは、
1行の時、使います。

flex-wrapの折り返しで
2行以上になったら、

align-content(2行以上用)を使います。


値は5つあります。
 1:stretch(デフォルト) = width、heightがautoの時に動作(auto以外は前づめ)
 2:flex-start  = 前づめ
 3:center   = 中央
 4:flex-end  = 後づめ
 5:baseline  = 文字底そろえ

(4)flex-wrap

flex-wrapは、
折り返しをするプロパティです。

子要素が範囲内であふれると
自動的に折り返されます。

値は3つあります。
 1:nowrap(デフォルト) = 折り返しなし
 2:wrap         = 折り返し
 3:wrap-reverse     = 折り返し逆

(5)align-content

align-contentは、
交差軸方向が2行以上の時
調整をするプロパティです。

値は7つあります。
 1:stretch(デフォルト) = width、heightがautoの時に動作(auto以外は前づめ)
 2:flex-start    = 前づめ
 3:center     = 中央
 4:flex-end    = 後づめ
 5:space-around  = 均等割もどき
 6:space-between = 両端
 7:space-evenly  = 均等割

(6)order

orderは、
css側で順番を指定するプロパティです。

orderは、
並べる子要素に入れて使います。

値は数値のみです。

order: 1;
order: 2;
order: 3;

数字の小さい順番に
並んで行きます。

もし使う場合は、
並べる子要素全てに
数値を入れた方が分かりやすいでしょう。

そして、
数値も1、2、3、4、5と
順番通りにした方が良いでしょう。

以上、
flexboxプロパティ群の説明
の話でした。

ありがとうございました。

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