０、対象読者

・HTMLコーディング初心者
・ProgateのHTML&CSSコースは終えている
・Flexboxを使ったことがない
つまり私。

１、通常

HTML
<div class="parent">
    <p class="child left">child1</p>
    <p class="child right">child2</p>
</div>

CSS
.parent{
	width: 700px;
	height: 300px;
	margin: 50px;
	background-color: #CCB0B5;
	border: 2px solid #4F2E33;
	border-radius: 10px;
}

.child{
	width: 200px;
	height: 100px;
	background-color: #9BAEBE;
	border: 5px solid #152B3E;
}

ここからいろいろ追加していきます。

２、子要素を横並びにする

CSS
.parent{
    display: flex;
}

親要素にdisplay: flexと書くだけでこんなことになります。

３、左の子要素の横幅を固定、右の子要素の横幅を可変に

.right{
    flex: 1;
}

右側は横幅が埋まるまで広がります。左は何も指定していないのでそのままです。

４、主軸を変える

主軸・・・普通右方向になっていて、２でdisplay:flexと指定するだけで右に整列していたのは主軸が右方向だからです。これを下方向に指定すると

.parent{
    display: flex;
    flex-direction: column;
}

縦に並んで、しかも３で横いっぱいに埋まっていたのが、縦いっぱいに埋まるようになりました。
主軸の話はここが参考になりました。

フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

５、flexを色々変えてみる

.left{
	flex: 1;
}

.right{
	flex: 1;
}

1：1に広がります。

.left{
	flex: 2;
}

.right{
	flex: 1;
}

2：1に広がります。

flexプロパティはいろいろ他にも設定があるそうです。

flex－CSSリファレンス
http://www.htmq.com/css/flex.shtml

６、子要素を余白も含めて水平方向に均等に並べる

一旦２の状態に戻します。

ここで親要素にjustify-content: space-aroundを追加します。

.parent{
    display: flex;
    justify-content: space-around;
}

７、子要素を垂直方向に中央揃え

.parent{
    display: flex;
    align-items: center;
}

上下の中央揃えが簡単に実現できます。

８、左右の均等配置＋上下の中央揃え

.parent{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

子要素には何も設定していません。これだけでちょうどいいところに配置してくれるのは最強な気がします。
この辺の余白の話はここを参考にしました。

日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

９、最後に

これからのスタンダードになるそうなので、練習していこう。でもそれぐらい今メジャーなんだったらProgateでも教えてくれて良さそうなのになぁ。