html要素を横並びにする方法として、かつてはfloat: [left|right];もしくはdisplay: inline-block;を使う時代があり、
その後、display: flex;の登場で、
横並び、さらには縦中央の配置というのが格段にしやすくなりました。

設定方法については様々なサイトで紹介されているので、
詳しい設定方法にはあまり触れず、
display: flex;を使う上で、必要な考え方を紹介したいと思います。
※ display: inline-flex;については触れません。

display: flex; とは

まず最初にdisplay: flex;とはということですが、
w3c が定義する CSS2.1 ではレイアウト手法は４つほど存在していて、
下記がそれにあたりますとの記載がありました。

• block layout（ブロックレイアウト）
• inline layout（インラインレイアウト）
• table layout（テーブルレイアウト）
• positioned layout（ポジションレイアウト）

CSS3から新たなレイアウト手法が追加される事になり、
それがdisplay: flex;を使用して表現する、
Flexible Box Layout（フレキシブルボックスレイアウト）になります。

こちらの内容については w3c の CSS Flexible Box Layout Module Level 1 Introductionから確認をお願いいたします。

実際に設定するとどうなるのか

ではこの css が当てられた要素はどうなるかというと、
当てられた要素自体は特に変わりがありません。
当てられた要素の中身の配置が変わります。

つまりどういうことかというと、
cssを設定せずに、HTML要素（div, p, h1~h6, header, footer, section, aside）を並べただけでは、
基本的に上から順番に縦積みされただけの状態で表示されます。

demo01 レイアウト手法の設定なし

下記のdemoは
margin, padding, font-size, background-color, border を使って、
階層と領域（エリア）を表現しています。

  
ヘッダー 
  
 
    
タイトル
    
文章
  
  

#demo01 {
  padding: 10px;
  font-size: 1.6rem;
  background-color: #91cb95;
}
#demo01 .header {
  padding: 10px;
  background-color: #fea41d;
  border: 1px solid currentColor;
}
#demo01 .contents {
  margin-top: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid currentColor;
}
#demo01 .title {
  padding: 10px;
  font-size: 1.6rem;
  border: 1px solid currentColor;
}
#demo01 .paragraph {
  margin-top: 5px;
  padding: 10px;
  border: 1px solid currentColor;
}
#demo01 .footer {
  margin-top: 5px;
  padding: 10px;
  background-color: #8fd5f8;
  border: 1px solid currentColor;
}

demo02 .contentsに display: flex;を設定してみる

demo01の .contentsに display: flex;だけ加えてみると下記のようになります。

@@ -11,6 +11,7 @@
  #demo02 .contents {
+   display: flex;
    margin-top: 5px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid currentColor;
  }
  

.contentsに display: flex;を加える事によって、
.contentsが Flexible Box Layout を行える領域になったことを表し、タイトルと文章が横並びになっています。
タイトルと文章で段差があるのは、
文章の上側に margin-top: 5px; がdemo01のまま効いている為です。

display: flex;を効かせた要素を flexコンテナ と呼び、
この flexコンテナ のデフォルト設定はどうなるかというと、
子要素を横並び＆横幅はwidth: fit-content;相当＆子要素の中でマージン+要素の高さが一番大きい要素の高さに合わせます。

demo02でいうと、
文章の要素の高さ + margin-top: 5px = flexコンテナ内の要素の中で一番大きい高さ
なので、
flexコンテナ内の全ての子要素の高さ = 文章の要素の高さ + margin-top: 5px になります。
このことから、
タイトルの要素の高さは一番大きい要素の高さまで引き伸ばされる形で、元々の高さからは大きくなります。

このことから、
display: flex;が効いているflexコンテナには自動的に、
justify-content: flex-start;とalign-items: stretch;が効くということがわかります。

display: flex; に関連するcssプロパティ^※1

display: flex;を使用することで、
効果の出るcssプロパティがいくつかあり^※2、
それは下記になります。
※1 cssプロパティとは display: flex; の左側の display のことをそう言います。
※2 2022/08/02現在の内容になるので、新しい物が追加されている可能性があります。

• flex
• flex-grow
• flex-shrink
• flex-basis
• flex-flow
• flex-direction
• flex-wrap
• align-items
• align-self
• align-content
• justify-content
• order

これらを簡単に説明していきたいと思います。

flex

初期値： 0 1 auto
設定先： flexコンテナの子要素
flex-grow、flex-shrink、flex-basis をショートハンド形式で記載する時に使用するcssプロパティ
W3C Technical Report：The flex Shorthand
図解：flexが設定されたときの配置図

flex-grow

初期値： 0
設定先： flexコンテナの子要素
flexコンテナ内にスペースが余った時、余ったスペースを分配し子要素の横または縦幅を広げる際に使用するプロパティ
W3C Technical Report：The flex-grow property

flex-shrink

初期値： 1
設定先： flexコンテナの子要素
flexコンテナからはみ出す時、はみ出した領域を分配し子要素の横または縦幅を縮める際に使用するプロパティ
flex-shrink: 0;を設定した時、縮小対象から外れる
W3C Technical Report：The flex-shrink property

flex-basis

初期値： auto
設定先： flexコンテナの子要素
flexコンテナ内での子要素の並び方向に対して横もしくは縦幅を設定するプロパティ
要素内のコンテンツ量と強大要素と設定値によって影響しあい要素の幅が可変する
W3C Technical Report：The flex-basis property

flex-flow

初期値： row nowrap
設定先： flexコンテナ
flex-direction、flex-wrap をショートハンド形式で記載する時に使用するcssプロパティ
W3C Technical Report：Flex Direction and Wrap: the flex-flow shorthand
図解：flex-flowが設定されたときの配置図

flex-direction

初期値： row
設定先： flexコンテナ
flexコンテナ内の並び方向を指定する際に使用するプロパティ（row:水平方向、column:垂直方向）
W3C Technical Report：Flex Flow Direction: the flex-direction property

flex-wrap

初期値： nowrap
設定先： flexコンテナ
flexコンテナの横幅もしくは縦幅内に子要素が収まりきらなかった際に、カラム落ちさせるかどうかを指定するためのプロパティ
W3C Technical Report：Flex Line Wrapping: the flex-wrap property

align-items

初期値： stretch
設定先： flexコンテナ
flexコンテナのdirection方向の垂直軸に対して、子要素をどうレイアウトするのかを決定するためのプロパティ
W3C Technical Report：Cross-axis Alignment: the align-items properties
図解：align-itemsが設定されたときの配置図

align-self

初期値： auto
設定先： flexコンテナの子要素
flexコンテナのdirection方向の垂直軸に対して、子要素をどうレイアウトするのかを決定するためのプロパティ
align-items は親要素に設定するプロパティで、align-self は親要素の設定に逆らうための個別のプロパティ
W3C Technical Report：Cross-axis Alignment: the align-self properties
図解：align-selfが設定されたときの配置図

align-content

初期値： stretch
設定先： flexコンテナ
flex-wrapによってカラム落ちした状態に対して、並び方向が横の時は行（並び方向が縦の時は列）単位でレイアウト位置を決めるプロパティ
justify-contentに似ていて、行もしくは列ごとにレイアウトを決める事になる。
W3C Technical Report：Packing Flex Lines: the align-content property
図解：align-contentが設定されたときの配置図

justify-content

初期値： flex-start
設定先： flexコンテナ
flexコンテナのdirection方向に対して、子要素をどうレイアウトするのかを決定するためのプロパティ
W3C Technical Report：Axis Alignment: the justify-content property
図解：justify-contentが設定されたときの配置図

order

初期値： 0
設定先： flexコンテナの子要素
flexコンテナ内での先頭からの順番を指定するためのプロパティ
W3C Technical Report：Display Order: the order property
図解：orderが設定されたときの配置図

display: flex; に関係ない紛らわしいcssプロパティ

cssを書くときに、補完機能が働く設定にしている方がほとんどだと思いますが、
justify-と入力している際に、
幾つか候補が挙げられることがあります。
それが、
下記の候補ではないでしょうか。

• justify-content
• justify-items
• justify-self
• justify-track

この４つは　MDN や　HTMLクイックリファレンス を確認すると、
並びに関しての設定項目だというのがわかります。

実際にdispla: flex;を使用して、
効果が得られるものはjustify-contentのみになり、
他の下三つのcssプロパティは、
displa: grid;でしか設定を効かせることができないプロパティになります。

align-xxx のように似たプロパティ名達なので使えるかと思いきや、
全く使うことができません。

display: flex; による並び方向と２つの軸

flex-direction によって並ぶ方向を縦軸方向・横軸方向で切り替えることができることを、
cssプロパティで説明しましたが、
イメージしやすいように図解で表してみます。

このことから、
flex-directionの向きに対して並行に設定するCSSプロパティはjustify-content
flex-directionの向きに対して垂直に設定するCSSプロパティはalign-items
ということがわかりました。

まとめ

display: flex;を設定したときの基本的な内容を記載しました。
設定したことによる状態の変化、
使用できるCSSプロパティ、
並び方向と縦軸・横軸の関係、
上記は使用する上での基礎中の基礎の部分になります。

関連するCSSプロパティについては、
種類が多く、それぞれで内容としてボリュームがあるものになるので、
また別の機会にしたいと思います。

この情報が誰かのサイト制作の助けになれば幸いです。
そして、他のサイトにも設定方法が掲載されているので合わせて参考にしていただければと思います。