フレックスボックスしたい（display: block flex）
.cards {
display: block flex; /* 1値構文では display: flex; */
gap: 1rem;
}
<div class="cards">
<div>1枚目</div>
<div>2枚目</div>
<div>3枚目</div>
</div>
フレックスボックス（flexbox）は、1次元（横方向または縦方向）に並べるレイアウト方式です。 親要素を「フレックスコンテナー」、 子要素を「フレックスアイテム」と呼びます。
display: block flexを指定した親要素（フレックスコンテナー）に対して、その直下の子要素（フレックスアイテム）が自動的に1次元に並びます。
デフォルトは横方向（左から右）です。
フレックスアイテムの間隔はgapで指定します。
ヒント
フレックスアイテムとなるのは、フレックスコンテナーの直下の子要素だけです。 孫要素はフレックスアイテムになりません。
フレックスコンテナーの直下の子要素は、ブロック要素（<div>や<p>など）だけでなく、インライン要素（<span>や<a>など）も自動的にフレックスアイテムになります。
注釈
/* 2値構文 */
display: block flex;
/* 1値構文（従来の書き方） */
display: flex;
CSS Display Module Level 3の仕様変更により、2値構文で書くことが推奨されているので、このドキュメントでは2値構文（display: block flex）で書いています。
これまでの1値構文（display: flex）でも同じように解釈されるので、適宜読み替えながら使ってください。
参考
フレックスボックスが登場する前は、floatやinline-blockを使って横並びを作っていました。
.card {
float: left;
display: inline-block;
margin-right: 1rem;
}
縦並びにしたい（flex-direction）
.stack {
display: block flex;
flex-direction: column;
gap: 0.5rem;
}
flex-directionで、アイテムを並べる向きを変更できます。
デフォルトはrowで横方向に並びます。
columnで縦方向に並べることができます。
<!-- index.html -->
<style>
body {
display: block flex;
flex-direction: column;
gap: 1rem;
}
</style>
<body>
<header>ヘッダー</header>
<main>メインコンテンツ</main>
<footer>フッター</footer>
</body>
bodyを縦方向のフレックスコンテナーにしておくと、ヘッダー・メインコンテンツ・フッターを縦に並べることができます。
中央揃えしたい（justify-content / align-items）
.container {
display: block flex;
justify-content: center; /* 主軸（横方向）の位置 */
align-items: center; /* 交差軸（縦方向）の位置 */
height: 200px;
}
justify-contentで主軸（横方向）の配置、
align-itemsで交差軸（縦方向）の配置を変更できます。
フレックスコンテナーのデフォルトは、主軸が横方向です。
justify-content: centerで左右中央揃え、
align-items: centerで上下中央揃えにすると、
要素をコンテナーのど真ん中に配置できます。
均等配置したい（justify-content）
.nav {
display: block flex;
justify-content: space-between;
}
justify-contentで、アイテム間の余白設定を変更できます。
space-betweenでコンテナー幅を基準に均等揃え、
space-aroundで各アイテムの左右に余白をつけて配置、
space-evenlyでアイテム間と両端の余白をすべて均等揃えにして配置できます。
「左にロゴ、右にナビゲーション」を作るときはspace-betweenをよく使います。
折り返したい（flex-wrap）
.cards {
display: block flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
width: 200px;
}
<div class="cards">
<div class="card">1枚目</div>
<div class="card">2枚目</div>
<div class="card">3枚目</div>
</div>
flex-wrap: wrapで、フレックスアイテムの内容を折り返して表示できます。
デフォルトはnowrapとなっていて、折り返しがありません。
表示幅が足りない場合は、1行に収まるように縮められます。
カード一覧のように「画面が広ければ横に並べ、狭ければ折り返したい」ときに使います。
幅を自動調整したい（flex）
.item {
flex: 1;
}
flexプロパティで、フレックスアイテムの幅を指定できます。
flex: 1を指定したアイテムを複数並べると、等幅になります。
.item-a {
flex: 2;
}
.item-b {
flex: 1;
}
flexの値を変えると、アイテムごとの幅の比率を変えられます。
上記は2:1の比率で幅を分ける例です。
.sidebar {
flex: 0 0 240px;
}
.main {
flex: 1;
}
flexの3値構文は、「伸びやすさ・縮みやすさ・基準の幅」をまとめて指定できます。
上記のサンプルでは、
サイドバー（.sidebar）を固定幅（240px）にして、
本文（.main）を残りの幅というレイアウトにしています。
並び順を変えたい（order）
.item-a { order: 2; }
.item-b { order: 1; }
orderプロパティで、HTMLの記述順を変えずに、表示上の並び順だけを入れ替えられます。
数値が小さいアイテムほど先に表示されます。初期値は0です。
画面が狭いときだけ特定の要素を先頭に出す、といった調整に使います。 ただし読み上げ順やキーボード操作の順序はHTMLのままなので、多用しないほうがよいです。