flexboxとは
flex-container
flex-item
flex-item
display: flex;
を指定した外側要素をflex-container、その中にある各要素をflex-itemと呼びます。この状態では、flex-itemは横に並びます。
例)
.flex-container {
   display: flex;
}
例)
.flex-container {
   display: flex;
}
水平方向の並べ方
flex-container
flex-item
flex-item
justify-contentというプロパティで水平方向の並び方を定義します。
図はflex-container側にjustify-content: center;を指定した時です。
例)
.flex-container {
   display: flex;
   justify-content: center;
}
図はflex-container側にjustify-content: center;を指定した時です。
例)
.flex-container {
   display: flex;
   justify-content: center;
}
flex-container
flex-item
flex-item
justify-content: space-between;の時。
例)
.flex-container {
   display: flex;
   justify-content: space-between;
}
例)
.flex-container {
   display: flex;
   justify-content: space-between;
}
垂直方向の並べ方
flex-container
flex-item
flex-item
align-itemsというプロパティで垂直方向の並び方を定義します。
図はflex-container側にalign-items: center;を指定した時です。
例)
.flex-container {
   display: flex;
   align-items: center;
}
図はflex-container側にalign-items: center;を指定した時です。
例)
.flex-container {
   display: flex;
   align-items: center;
}
flex-container
flex-item
flex-item
align-items: flex-end;の時。
例)
.flex-container {
   display: flex;
   align-items: flex-end;
}
例)
.flex-container {
   display: flex;
   align-items: flex-end;
}
折り返し
flex-container
flex-item
flex-item
flex-item
flex-item
このようなレイアウトを見た事ありませんか?これはflex-wrapというプロパティで折り返しを定義しています。このプロパティは、flex-itemの横幅の合計値がflex-containerをはみ出す場合の扱いを定義します。
flex-container側にflex-wrap: wrap; と指定する事で折り返しが起こるようになります。
例)
.flex-container {
   display: flex;
   flex-wrap: wrap;
}
flex-container側にflex-wrap: wrap; と指定する事で折り返しが起こるようになります。
例)
.flex-container {
   display: flex;
   flex-wrap: wrap;
}
flex-container
flex-item
flex-item
flex-item
flex-item
flex-wrapに指定がない場合、このようにcontainerに収まるようにitemが縮みます。
この時、itemのwidthの値は無視されます(本来33%で指定しているが、それよりも縮んでいる)。
実例集

画像のように、ロゴとナビメニューが並んでいる、ヘッダーによくあるレイアウト
.Header
Logo
Item
Item
Item
コード例(分かりやすさのため一部省略しています。全文はデベロッパーツールからご確認ください。)
また、itemの親要素が.Header-Navです。
.Header {
   width: 100%;
   display: flex;
   justify-content: space-between;
}
.Header-Logo {
   width: 100px;
}
.Header-Nav {
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
}
.Header-Nav-Item {
   width: 50px;
   height: 100%;
}
一番外の要素がflexになり、中の要素をjustify-content: space-between;を使って左右に振り分けます。
右の.Header-Navはさらにdisplay: flex;で中の.Header-Nav-Itemを横並べにします。
また、itemの親要素が.Header-Navです。
.Header {
   width: 100%;
   display: flex;
   justify-content: space-between;
}
.Header-Logo {
   width: 100px;
}
.Header-Nav {
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
}
.Header-Nav-Item {
   width: 50px;
   height: 100%;
}
一番外の要素がflexになり、中の要素をjustify-content: space-between;を使って左右に振り分けます。
右の.Header-Navはさらにdisplay: flex;で中の.Header-Nav-Itemを横並べにします。

画像のように、記事が一覧で並んでいるレイアウト
.Article
.Article-Card
.Article-Card
.Article-Card
.Article-Card
.Article-Card
.Article-Card
コード例(分かりやすさのため一部省略しています。全文はデベロッパーツールからご確認ください。)
.Article {
   width: 100%;
   padding: 20px;
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}
.Article-Card {
   width: calc(50% - 10px);
}
container側は折り返しを定義するflex-wrap: wrap;に。 itemの横幅は34%以上50%以下にすれば横に2つ収まります。今回はgap分の幅を引いて調整しています。
.Article {
   width: 100%;
   padding: 20px;
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}
.Article-Card {
   width: calc(50% - 10px);
}
container側は折り返しを定義するflex-wrap: wrap;に。 itemの横幅は34%以上50%以下にすれば横に2つ収まります。今回はgap分の幅を引いて調整しています。