flex-boxは、横並びデザインだけでなく、縦一列のデザインもこなします。一次元のレイアウト用の機能です。
flex-boxの設定方法
flex-containerを作成する
divタグで親要素を追加
レイアウトしたい要素=flex-item（=子要素）を入れておく入れ物＝flex-container（＝親要素）を作ります。flex-itemにしたい要素の前後に<div>タグを追加して、クラス設定をします。
<div class="container"> /* 親要素を追加、クラスを設定 */
<img src="画像のurl"> /* 子要素(flex-item) */
<p>文言</p> /* 子要素(flex-item) */
<span>Text</span> /* 子要素(flex-item) */
</div>
flex-boxを指定
displayプロパティを使います。
flex
：displayの値で、flex-box に設定します。
.container {
display: flex;
}
文言
Textflex-item（子要素）は全て横並びとなります。
横並びになったのは、わけがあります。flex-direction: row; がデフォルトで指定してあるからです。
flex-direction
flex-itemを縦に並べるか、横に並べるかを指定するプロパティです。横に並べる場合を横軸、縦ならば縦軸、まとめて主軸（の向き）と言います。
row
：初期値。左から右へ横軸に沿って並べます。
row-reverse
：右から左へ横軸に沿って並べます。
column
：上から下へ縦軸に沿って並べます。
colum-reverse
：下から上へ縦軸に沿って並べます。
-reverse 付きの値を使うことで、HTMLソースを変更せずに表示を逆順にすることができます
.container {
display: flex;
flex-direction: column-reverse;
}
文言
Text
justify-content
flex-itemを主軸上のどこに置くか、位置を指定するプロパティです。
flex-start
：主軸の先端に向かって寄せて配置されます。
flex-end
：主軸の終端に向かって寄せて配置されます。
.container {
display: flex;
justify-content: flex-end;
}
文言
Text
center
：中央へ寄せて配置されます。
.container {
display: flex;
justify-content: center;
}
文言
Text
space-between
：主軸の両端に揃えて均等に配置されます。(両端揃え)
.container {
display: flex;
justify-content: space-between;
}
文言
Text
space-around
：均等な余白をつけて両端揃えで配置されます。
.container {
display: flex;
justify-content: space-around;
}
文言
Text
align-item
flex-itemの主軸と交差する軸（交差軸）、つまり横並びならば縦、縦ならば横のどこに置くか、位置を指定するプロパティです。
stretch
：初期値。交差軸方向へ親要素分引き延ばして表示されます。
flex-start
：交差軸上の先頭位置に表示されます。
center
：交差軸上の中央に表示されます。
.container {
display: flex;
justify-content: space-around;
align-items: center;
}
文言
Text
flex-end
：交差軸上の末尾位置に表示されます。
.container {
display: flex;
justify-content: space-around;
align-items: flex-end;
}
文言
Text
flex-boxは、横揃えだけでなく縦一列にもそろえることができるため、top、bottom、left、rightなどではなく、start、endが使われます。
この記事では、親コンテナで指定するプロパティを扱いました。子要素に指定して項目同士の表示を指示するプロパティもあります。