Flexboxとは

CSS3 Flexible Box (可変ボックス)
CSS Flexible Box Layout Module Level 1
ボックスのレイアウト方法を定めるCSSの機能
ボックスを任意の方向にレイアウトしたり、ボックスの大きさを伸縮可能（flex）にするもの
flex：融通のきく、柔軟なという意味

CSS flexible box の利用

developer.mozilla.org

Flexboxで可能なボックスの操作

横並び
縦並び
拡大
縮小
左寄せ・中央寄せ・右寄せ
上寄せ・中央寄せ・下寄せ
均等配置
複数行のレイアウト
並び方向の変更
並び順の変更

レイアウトの指定方法

display: flex

Flex Container (display: flex または display: inline-flex が設定された要素) の直下の子要素が「flex アイテム」となります
Flex コンテナ内で直下に続くテキストも flex アイテムになります

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Flexbox - ボックスとは</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  gap: 10px;
  margin: 50px;
  padding: 8px;
  border: 1px dotted #000;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  background: #4C91E2;
  border: 4px solid #FFF;
  color: #FFF;
  font-size: 30px;
  font-family: "Arial Black", sans-serif;
}
</style>
</head>
<body>
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
</body>
</html>
</html>

display: flex;

flexboxを使用するには、親要素にdisplay:flex;を指定します
親要素のことをflexコンテナ、子要素のことをflexアイテムと呼びます

flexコンテナー

flexコンテナーは「flexアイテム」を内包する親要素です
flexアイテムの縦・横軸の位置や並び順、折り返しなどを簡単に指定できます

《flexコンテナに指定するプロパティ》

flex-direction	flexアイテムの並び方を指定する
flex-wrap	flexアイテムの折返しを指定する
flex-flow	flexアイテムの並び方と折返しを指定する
justify-content	flexアイテムのヨコの配置を指定する
align-items	flexアイテムの高さを揃える
align-content	flexアイテムのタテの配置を指定する

flex-dierction

flex-dierctionはflexアイテムの並び方を指定するプロパティです

《flex-directionの値》

row（基準値）	左寄せで左から順に配置
row-reverse	右寄せで右から順に配置
column	上寄せで上から順に配置（タテ並び）
column-reverse	下寄せで下から順に配置

flex-wrap

flex-wrapはflexアイテムの折り返しを指定するプロパティです

《flex-wrapの値》

wrap	親要素からはみ出た部分を折り返す
nowrap	折り返さない
wrap-reverse	逆順で折り返す

flex-flow

flex-flowはflexアイテムの並び方と折り返しを指定するプロパティです

flex-flow: flex-directionの値 flex-wrapの値;

《flex-flowの値》

flex-directionの値		flex-wrapの値
row（基準値）	左寄せで左から順に配置	wrap	親要素からはみ出た部分を折り返す
row-reverse	右寄せで右から順に配置	nowrap	折り返さない
column	上寄せで上から順に配置（テテ並び）	wrap-reverse	逆順で折り返す
column-reverse	下寄せで下から順に配置

justify-content

justify-contentはflexアイテムの横方向の配置を指定するプロパティです

《justify-contentの値》

flex-start	左寄せ
flex-end	右寄せ
center	中央寄せ
space-between	両端揃え
space-around	それぞれの両端に均等な余白をつけて配置
space-evenry	両端を含めたすべての余白を均等に配置

align-items

align-itemsはflexアイテムの高さを揃えるプロパティです

《align-itemsの値》

stretch / normal（初期値）	親要素の高さに合わせて子要素を伸縮する
flex-start	親要素の上端で揃える
flex-end	親要素の下端で揃える
center	親要素の中央で揃える
baseline	子要素をベースラインで揃える

align-content

align-contentはflexアイテムの縦方向の配置を指定するプロパティです

《align-contentの値》

flex-start	上寄せ
flex-end	下寄せ
center	中央寄せ
space-between	上下の両端揃え
space-around	上下の両端に均等な余白をつけて配置
space-evenry	上下の両端を含めたすべての余白を均等に配置

flexアイテム

flexアイテムは「flexコンテナー」内に配置された子要素です
親要素がflexコンテナーであれば自動でflexアイテムとして扱われます
横並びで表示されます
親要素に合わせて横幅・高さが伸縮します

《flexアイテムに指定するプロパティ》

order	flexアイテムの表示順を指定する
flex-grow	flexアイテムの伸び率を指定する
flex-shrink	flexアイテムの縮み率を指定する
flex-basis	flexアイテムの基準の大きさを指定する
flex	flexアイテムの基準の大きさと伸縮率を指定する
align-self	flexアイテムのタテの配置を個別に指定する
gap	flexアイテム同士の余白を指定する

order

orderはflexアイテムの表示順を指定するプロパティです

すべてのflexアイテムにorderを指定した場合
- 要素の表示順はorderの数値が小さいものからとなります

一部のflexアイテムにorderを指定した場合
- 要素の表示順は以下のとおりです
1. orderの値がマイナスのflexアイテム
2. orderの指定がない（orderの値が0の）flexアイテム
3. orderの値がプラスのflexアイテム

flex-grow

flex-growはflexアイテムの伸び率を指定するプロパティです。flex-growには数値を指定します
親要素に余白があるとき、指定したflex-growの数値に応じてflexアイテムに余白分の大きさを追加します

flex-shrink

flex-shrinkはflexアイテムの縮み率を指定するプロパティです。flex-shrinkには数値を指定します
親要素からflexアイテムがはみ出すとき、指定したflex-shrinkの数値に応じてflexアイテムのはみ出た分を縮ませます

flex-basis

flex-basisはflexアイテムの基準の大きさを指定します
flex-basisとwidthは基本的に同じですが、併用した場合にはflex-basisが優先されます
flex-directionによってflexアイテムが縦並びになっているとき、flex-basisはheightの値をとります

《flex-basisに指定可能な値》

auto（初期値）	flexアイテムの大きさを自動的に決定する
数値 + 単位	flexアイテムの大きさを、数値とpxやrem、emなどの単位で指定する
%	flexアイテムの大きさを%比率で指定する

flex

flexはflexアイテムの基準の大きさと伸縮率を指定するプロパティです
flex-grow、flex-shrink、flex-basisをショートハンドで指定できます

《flexに記述する値の数・単位の有無による違い》

値が１つのとき	単位なしの場合	flex-growの値をとる
値が１つのとき	単位ありの場合	flex-basisの値をとる
値が２つのとき（単位をつけるのは２つめの値）	単位なしの場合	flex-grow、flex-shrinkの値をとる
値が２つのとき（単位をつけるのは２つめの値）	単位ありの場合	flex-grow、flex-basisの値をとる
値が３つのとき	３つ目の値に単位をつける	flex-grow、flex-shrink、flex-basisの値をとる

特定の数値のときのみ、以下の指定も可能です

initial	flex: 0 1 auto; を示す
auto	flex: 1 1 auto; を示す
none	flex: 0 0 auto; を示す

align-self

align-selfはflexアイテム個々の縦の配置を指定するプロパティです

《align-selfの値》

auto（初期値）	親要素のalign-itemsの値に合わせて子要素を配置する
flex-start	親要素の上端で揃える
flex-end	親要素の下端で揃える
center	親要素の中央で揃える
baseline	子要素をベースラインで揃える
stretch	親要素に合わせて子要素を伸縮する

gap

gapはflexアイテム同士の余白を指定するプロパティです
gapに指定する値が一つのときは、縦と横で同じ余白が与えられます

gap:20px（縦の余白） 30px（横の余白）;