display: flex; を指定した外側要素をflex-container、その中にある各要素をflex-itemと呼びます。この状態では、flex-itemは横に並びます。

例)
.flex-container {
   display: flex;
}

justify-contentというプロパティで水平方向の並び方を定義します。
図はflex-container側にjustify-content: center;を指定した時です。

例)
.flex-container {
   display: flex;
   justify-content: center;
}

justify-content: space-between;の時。

例)
.flex-container {
   display: flex;
   justify-content: space-between;
}

align-itemsというプロパティで垂直方向の並び方を定義します。
図はflex-container側にalign-items: center;を指定した時です。

例)
.flex-container {
   display: flex;
   align-items: center;
}

align-items: flex-end;の時。

例)
.flex-container {
   display: flex;
   align-items: flex-end;
}

このようなレイアウトを見た事ありませんか？これはflex-wrapというプロパティで折り返しを定義しています。このプロパティは、flex-itemの横幅の合計値がflex-containerをはみ出す場合の扱いを定義します。
flex-container側にflex-wrap: wrap; と指定する事で折り返しが起こるようになります。

例)
.flex-container {
   display: flex;
   flex-wrap: wrap;
}

flex-wrapに指定がない場合、このようにcontainerに収まるようにitemが縮みます。 この時、itemのwidthの値は無視されます（本来33%で指定しているが、それよりも縮んでいる）。

画像のように、ロゴとナビメニューが並んでいる、ヘッダーによくあるレイアウト

コード例（分かりやすさのため一部省略しています。全文はデベロッパーツールからご確認ください。）
また、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 {
   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分の幅を引いて調整しています。