Flexはどこで使うものですか?

Flex(Flex)はFlexible Box、Flexboxとも呼ばれます.
Flexは、レイアウトを効率的に配置することを目的としています.これは従来のfloat、inline blockなどの方法よりも便利です.
まず、htmlタグを以下のように作成します.
親コンテナにコンテナを配置し、アイテムを子コンテナに配置します.

<div class="container">
  <div class="item left">helloflex</div>
  <div class="item center">abc</div>
  <div class="item right">hiflex</div>
</div>

親ラベルと子ラベルにflexに関連するプロパティを指定し、flexを理解します.

display: flex;

まず、親ラベル(container)でdisplay:flexとdisplay:blockを交互に使用して比較してみましょう.

.container {
  display: flex;
  border: 1px dotted blue;
  padding: 10px;
}
 
.item {
  border: 1px solid purple;
  margin: 0 5px;
}

containerのdisplayプロパティをflexとして指定すると、divラベルは次のようにソートされます.
この行のプロパティだけで、アイテムが水平に並んでいることがわかります.
表示を容易にするために、10 pxのpaddingを指定しました.

比較のためにcontainerのdisplayプロパティをblockに変更しました.
サブエレメントが1行いっぱい並んでいます.

displayプロパティをinline-flexに変更してみます.
flexはサブ要素を1行に並べ、親ラベルのサイズもサブラベルのサイズに縮小することがわかります.

flex-direction:配置方向の決定

これらの項目を配置する軸方向のプロパティを決定します.横並びか縦並びか決めます.

row(デフォルト)

.container {
  display: flex;
  border: 1px dotted blue;
  padding: 10px;
  
  flex-direction: row; /* 기본값 */
}

flex-direction:rowはdisplay:flexのデフォルトです.

row-reverse

flex-directionプロパティの値はrow-reverseとして指定されます.
右から左に揃えます.
サブラベルは、位置が右に移動するだけでなく、右から順に並べられます.

column

flex-direction: column;

サブエレメントの位置合わせは、水平方向ではなく垂直方向の値です.
display: block; 非常に似ています.

column-reverse

row-reverseと同様に、サブラベルは下から下へ逆の順序で並べられます.

rivided-内容:水平軸方向揃え

アイテムのプロパティを水平軸方向に並べます.

.container {
  display: flex;
  border: 1px dotted blue;
  padding: 10px;
  
  justify-content: flex-start; /* 기본값 */
}

flex-start(デフォルト)

flex-startはデフォルトです.flex-endは右から揃えます.

center

justify-content: center;

アイテムを水平軸の中央に揃えます.

space-between

物品間の間隔を一定に保つ.

space-around

物の左右周長を固定する.

space-evenly

物の間と両端の間隔を一致させる.

space-tween,space-ound,space-平均の違い

次の図を使用して、違いを区別できます.

align-items:垂直軸方向揃え

垂直軸方向の位置合わせをテストするために、親タグはheightプロパティに200 pxの値を指定します.
itemごとに異なる文字サイズを設定しました.
親ラベルにheight値を指定すると、デフォルトではstretchがalign-itemsプロパティに適用されます.

.container {
  display: flex;
  border: 1px dotted blue;
  padding: 10px;
  height: 200px;
  
  align-items: stretch; /* 기본값 */
}

stretch(デフォルト)

品物は垂直軸方向に伸びる.
align-itmesプロパティにstretch値は指定されず、heightプロパティに特定の値のみを指定すると、ボックスが展開されます.

center

align-items: center;

垂直軸の中心に項目を配置します.

baseline

プロジェクトテキストのベースラインに基づいてソートします.