flexboxは、横並びデザインだけでなく、縦一列のデザインでも使える一次元のレイアウト手法です。
flexboxの設定方法
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>
flexboxの指定
displayプロパティを使います。
flex
：displayの値の一つで、flexboxの親要素指定値です。
.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
flexboxは、横揃えだけでなく縦一列にもそろえることができるため、top、bottom、left、rightなどではなく、start、endが使われます。
この記事では、親コンテナで指定するプロパティを扱いました。子要素に設定、子要素項目（flex item）のサイズを指定するプロパティもあります。