Flexboxの魔法を使いこなす冒険へようこそ！どんな複雑なレイアウトも、Flexboxの基本をしっかり押さえれば、きっと君の思い通りに操れるようになるよ。 その第一歩は、魔法の杖を振る親要素、そう、「フレックスコンテナ」について深く知ることだ！
フレックスコンテナとは、その中の子要素（これを「フレックスアイテム」と呼ぶよ）の並び方や位置をコントロールする特別な力を持った親要素のこと。 この親要素にどんな魔法の呪文（CSSプロパティ）をかけるかで、中のアイテムたちの振る舞いがガラリと変わるんだ。
まずは、親要素をフレックスコンテナに変身させる最初の呪文、display: flex; から見ていこう！
Flexboxを理解する上で、絶対に欠かせないのが「主軸 (しゅじく)」と「交差軸 (こうさじく)」という２つの「軸」の考え方だよ。 これは、フレックスアイテムたちがどちらの方向に並んで、どちらの方向に揃えられるかの「道しるべ」になるんだ。
この軸の向きは、次に説明する flex-direction というプロパティで決まるんだ。
flex-direction と軸の向き下のセレクトボックスで flex-direction の値を変えてみて！赤い線が「主軸」、青い線が「交差軸」を表しているよ。アイテムの並び方と軸の向きがどう変わるか観察しよう。
主軸と交差軸を常に意識することが、Flexboxをマスターする上での最大のコツだよ！
さあ、いよいよフレックスコンテナに使える具体的な魔法の呪文 (CSSプロパティ) を見ていこう！
display – フレックスパワー発動！何はともあれ、まずはこの呪文で親要素をフレックスコンテナに変身させないと始まらない！
display: flex;: 親要素を「ブロックレベル」のフレックスコンテナにするよ。コンテナ自身は前後に改行が入るような、普通のブロック要素みたいに振る舞うんだ。display: inline-flex;: 親要素を「インラインレベル」のフレックスコンテナにするよ。コンテナ自身はテキストや画像みたいに、他の要素と横に並ぶことができるんだ。.container {
display: flex; /* または display: inline-flex; */
}このサイトのデモでは、特に指定がない限り display: flex; を使っているよ。
flex-direction – アイテムの並ぶ向きと主軸を定める！さっきのデモでも見たけど、この呪文でアイテムたちが並ぶ方向、つまり「主軸の向き」を決めるんだ。
row (初期値): 左から右へ横方向に並ぶよ。（主軸：横、交差軸：縦）row-reverse: 右から左へ横方向に並ぶよ。（主軸：横、交差軸：縦）column: 上から下へ縦方向に並ぶよ。（主軸：縦、交差軸：横）column-reverse: 下から上へ縦方向に並ぶよ。（主軸：縦、交差軸：横）flex-direction を変えてみようflex-wrap – アイテムを折り返すか決める！コンテナの幅や高さにアイテムが収まりきらないとき、どうするかを決める呪文だよ。レスポンシブデザインでは特に重要！
nowrap (初期値): 折り返さない。アイテムがコンテナからはみ出したり、無理やり縮んだりするよ。wrap: 折り返す。アイテムは次の行（または列）に移動して、複数行（または複数列）で表示されるよ。wrap-reverse: 逆方向に折り返す。例えば、横並びなら下の行から上の行へ、という感じ。flex-wrap で折り返しを体験！アイテムの数を増やしたり、ブラウザのウィンドウ幅を狭めたりして、折り返しの様子を見てみよう。
flex-flow – flex-direction と flex-wrap の合わせ技！この2つの呪文をいっぺんに唱えたいときに使うショートハンド（短縮形）だよ。
.container {
flex-flow: [flex-directionの値] [flex-wrapの値];
}
/* 例 */
.container {
flex-flow: row wrap; /* flex-direction: row; flex-wrap: wrap; と同じ */
}どっちの順番で書いても大丈夫だけど、だいたいは flex-direction を先に書くことが多いかな。
justify-content – 主軸方向のアイテム整列！主軸に沿って、アイテムたちをどうやって配置するか、その間隔をどうするかを決める、とっても重要な呪文だ！
flex-start (初期値): 主軸の開始位置に詰めて配置。flex-end: 主軸の終点位置に詰めて配置。center: 主軸の中央に寄せて配置。space-between: 最初と最後のアイテムは両端に、残りのアイテムは均等な間隔をあけて配置。space-around: 各アイテムの周囲に均等な間隔をあけて配置。両端のアイテムとコンテナの間の間隔は、アイテム間の間隔の半分になるよ。space-evenly: すべてのアイテム間、および両端のアイテムとコンテナの間の間隔が、すべて均等になるように配置。justify-content で主軸の配置を操ろうflex-direction を row (横並び) と column (縦並び) で切り替えて、主軸が変わるとどうなるかも見てみよう！
align-items – 交差軸方向のアイテム整列 (単一行編)！今度は交差軸（主軸に直角な方向）に沿って、アイテムたちをどう揃えるかを決める呪文だよ。これは主にアイテムが一行（または一列）に並んでいるときに使うんだ。
stretch (初期値): アイテムの高さをコンテナの高さ（または幅、交差軸による）いっぱいに伸ばす。（アイテムに高さが指定されてない場合）flex-start: 交差軸の開始位置に揃える。flex-end: 交差軸の終点位置に揃える。center: 交差軸の中央に揃える。baseline: アイテムの中の文字のベースライン（文字が乗っている見えない線）で揃える。文字の大きさが違うアイテムが並んでいるときに効果が分かりやすいよ。align-items で交差軸の配置をマスター！baseline を試すときは、「ベースライン用アイテム追加」ボタンを押して、文字サイズの違うアイテムを混ぜてみると面白いよ！
align-content – 交差軸方向のアイテム整列 (複数行編)！
flex-wrap: wrap; でアイテムが複数行になったとき、その「行全体」を交差軸方向のどこに配置するか、行と行の間隔をどうするかを決める呪文だよ。
align-items が各行の中のアイテムを揃えるのに対して、align-content は行そのものを揃えるイメージだね。
注意：アイテムが一行しかないときは、この呪文は効かないよ！
stretch (初期値): 各行がコンテナの高さ（または幅）いっぱいに広がるように、行の間隔を広げる。flex-start: すべての行をコンテナの開始位置に詰める。flex-end: すべての行をコンテナの終点位置に詰める。center: すべての行をコンテナの中央に寄せる。space-between: 最初と最後の行はコンテナの両端に、残りの行は均等な間隔をあけて配置。space-around: 各行の周囲に均等な間隔をあけて配置。space-evenly: すべての行間、および最初の行とコンテナの開始位置、最後の行とコンテナの終点位置の間隔が、すべて均等になるように配置。(比較的新しい値)align-content で複数行の配置を極める！このデモでは、アイテムが複数行になるように、コンテナの幅を固定し、アイテム数を多めにしているよ。flex-wrap: wrap; が必須だ！
ふぅー、たくさんの呪文を一気に見てきたね！でも、これでフレックスコンテナに使える主要な魔法はほとんどマスターしたも同然だ！
display: flex; でパワー発動！flex-direction で主軸の向きを決め、flex-wrap で折り返しをコントロールし、justify-content で主軸方向の配置を、align-items や align-content で交差軸方向の配置を決める！特に「主軸」と「交差軸」を常に意識して、それぞれのプロパティがどちらの軸に影響するのかをしっかり理解することが、Flexboxを使いこなすための最大のカギだよ。 最初は難しく感じるかもしれないけど、デモを色々いじって、実際にどう動くかを目で見て確かめながら、少しずつ仲良くなっていこうね。
さあ、親（コンテナ）の操り方を覚えた君は、次に子（アイテム）たちが持つ個別の魔法を学ぶ冒険に出発だ！ 次のページ「子要素（フレックスアイテム）の個性を引き出す魔法」で待ってるよ！