flexboxの説明、基礎編

こんにちは tanaka です。

今回は、
flexboxの基礎を
説明します。

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

画像blog-flex-box-basics78

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


やり方は

 1:開始を宣言
 2:ヨコかタテを決める
 3:主軸の調整
 4:交差軸の調整

これで完成です。

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

1:開始を宣言

  display:flex
  で開始を宣言する。

2:ヨコかタテを決める

画像blog-flex-box-basics06
画像blog-flex-box-basics07

3:主軸の調整

画像blog-flex-box-basics08
画像blog-flex-box-basics09

4:交差軸の調整

画像blog-flex-box-basics54
画像blog-flex-box-basics55

これで完成です。

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

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

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

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

flexboxの説明

flexboxとは

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

flexboxを使えば、
画像付き説明文をキレイに並べたり

線で囲んだボックスモデルを
並べたりもできます。

画像blog-flex-box-basics78

flexboxの種類

flexboxは、
様々な並べ方ができます。

 ・ヨコ置き
 ・タテ置き
 ・ヨコ折り返し
 ・タテ折り返し
 ・文字の底辺でそろえる

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

ヨコ置き

画像blog-flex-box-basics01

タテ置き

画像blog-flex-box-basics02

ヨコ折り返し

画像blog-flex-box-basics03

タテ折り返し

画像blog-flex-box-basics04

文字の底辺でそろえる

画像blog-flex-box-basics05

今回は、
基本形の
ヨコ置き、タテ置きのみ
紹介します。

flexboxの使い方

flexboxの使い方は、
基本形のヨコ、タテだけなら簡単です。

以下の手順で
親要素へプロパティを入れると、
そのプロパティーのルールに従い
子要素が並んで行きます。

 1:flexboxの開始を宣言   (display:flex)
 2:ヨコ、タテの方向を決める (flex-direction)
 3:主軸の調整        (justify-content)
 4:交差軸の調整       (align-items)

例)

画像blog-flex-box-basics02
display:flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
1:flexboxの開始を宣言(display:flex)

1:flexboxの開始を宣言。

display:flex

このプロパティにより
flex-boxが開始されます。

display: flex;
2:ヨコ、タテの方向を決める(flex-direction)

2:ヨコ、タテの方向を決める。

flex-direction: row;
flex-direction: column;

ヨコ方向にするか
タテ方向にするか
決めます。

row  = ヨコ方向

画像blog-flex-box-basics06

column = タテ方向

画像blog-flex-box-basics07
flex-direction: row;
flex-direction: column;
3:主軸の調整(justify-content)

3:主軸の調整

justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;

主軸方向の調整をします。

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

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

画像blog-flex-box-basics08

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

画像blog-flex-box-basics09

主軸の調整は6種類あります。

 flex-start    = 前づめ
 center     = 中央
 flex-end    = 後づめ
 space-around  = 均等割もどき
 space-between = 両端
 space-evenly  = 均等割


justify-content: flex-start(前づめ)

画像blog-flex-box-basics56
画像blog-flex-box-basics57

justify-content: center(中央)

画像blog-flex-box-basics58
画像blog-flex-box-basics59

justify-content: flex-end(後づめ)

画像blog-flex-box-basics60
画像blog-flex-box-basics61

justify-content: space-around(均等割もどき)

画像blog-flex-box-basics62
画像blog-flex-box-basics63

justify-content: space-between(両端)

画像blog-flex-box-basics64
画像blog-flex-box-basics65

justify-content: space-evenly(均等割)

画像blog-flex-box-basics66
画像blog-flex-box-basics67
justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
4:交差軸の調整(align-items)

4:交差軸の調整

align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: baseline;
align-items: stretch;

交差軸方向の調整をします。

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

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

画像blog-flex-box-basics54

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

画像blog-flex-box-basics55

交差軸の調整は5種類あります。

 flex-start = 前づめ
 center  = 中央
 flex-end = 後づめ
 baseline = 文字底そろえ
 stretch  = width、heightがautoの時に動作(auto以外は前づめ)


align-items: flex-start(前づめ)

画像blog-flex-box-basics70
画像blog-flex-box-basics71

align-items: center(中央)

画像blog-flex-box-basics72
画像blog-flex-box-basics73

align-items: flex-end(後づめ)

画像blog-flex-box-basics74
画像blog-flex-box-basics75

align-items: baseline(文字底そろえ)

画像blog-flex-box-basics76

align-items: stretch

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

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

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

  widthがauto     = 文字の幅

画像blog-flex-box-basics68

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

  heightがauto    = 文字の高さ

画像blog-flex-box-basics69
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: baseline;
align-items: stretch;

まとめ

flexboxとは

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

画像blog-flex-box-basics78

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

flex-boxの使い方

flexboxの使い方は、

以下のプロパティを
親要素へ入れるだけ

 1:display:flex  = flex-boxの開始を宣言
 2:flex-direction = ヨコ、タテの方向を決める
 3:justify-content = 主軸の調整
 4:align-items  = 交差軸の調整

入れたプロパティ群にしたがって、
子要素のボックスモデルが並ぶ。

1:flexboxの開始を宣言

1:display:flex(flex-boxの開始を宣言)

display: flex;

このプロパティにより
flexboxが開始。

display: flex;
2:ヨコ、タテの方向を決める

2:flex-direction(ヨコ、タテの方向を決める)

flex-direction: row;
flex-direction: column;

ヨコ方向にするか
タテ方向にするか
決める。

row  = ヨコ方向
column = タテ方向

画像blog-flex-box-basics06
画像blog-flex-box-basics07
flex-direction: row;
flex-direction: column;
3:主軸の調整

3:justify-content(主軸の調整)

justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;

主軸を調整する。

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

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

画像blog-flex-box-basics08

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

画像blog-flex-box-basics09

値)
 flex-start    = 前づめ
 center     = 中央
 flex-end    = 後づめ
 space-around  = 均等割もどき
 space-between = 両端
 space-evenly  = 均等割

justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
4:交差軸の調整

4:align-items(交差軸の調整)

align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: baseline;
align-items: stretch;

交差軸を調整する。

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

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

画像blog-flex-box-basics54

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

画像blog-flex-box-basics55

値)
 flex-start = 前づめ
 center  = 中央
 flex-end = 後づめ
 baseline = 文字底そろえ
 stretch  = width、heightがautoの時に動作(auto以外は前づめ)

align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: baseline;
align-items: stretch;

以上、
flexboxの基礎
の話でした。

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

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