CSS]display:flexについて

1.Flexコンテナ適用属性
1) display

flex

容器内に横置きflex品

Flex物品の幅は容器の高さと等しい

inline-flex

容器が周囲元素とどのように配合されるかを決定

コンテナの動作はinline-blockと似ています-コンテナの幅はコンテンツの幅

に調整されます.
2)flex-direction:flexitemの配置方向を設定する

row横方向(デフォルト)

row-reverse逆シーケンス幅

column垂直方向

column-逆垂直方向

3)flex-wrap:項目改行処理の設定

rowrap(デフォルト):改行X、オーバーフローによる不快感

wrap:改行.動作はfloatまたはinline-blockとして配置された要素

に似ています.

wrap-reverse:改行.逆順配置

4) flex-flow : flex-direction + flex-wrap
ex ) flex-flow: row wrap;
5)rivide-content:横並びアイテム

flex-start(デフォルト):始点を揃えます.flex-方向が行(水平配置)の場合は左、列(垂直配置)の場合は上

flex-end:端点に位置合わせします.flex-方向が行(水平配置)の場合は右側、列(垂直配置)の場合は下

center:中央揃え

space-twon:物品「間」の平均間隔

space-androw:物の「周長」に均一に間隔を置く

space-均一:物品間と両端の均一な間隔.注意!IEとEdgeはX

をサポートする
6)align-items:垂直位置合わせ項目

stretch(デフォルト):垂直軸方向に物品が上向きに伸びている

flex-start:アイテムを始点に揃えます.flex-方向が行(水平配置)の場合は上、列(垂直配置)の場合は左

flex-end:項目を末尾に並べます.flex-方向が行(水平配置)の場合は上、列(垂直配置)の場合は左

center:品物を中央に置く

baseline:テキストベースラインに基づいてプロジェクトをソート

7)align-コンテンツ:複数行ソート
flex-wrap: wrap;この設定では、アイテムの行数が2行より大きい場合の縦揃えを決定します
2.Flex item属性の適用
1)flex-bais:boxデフォルト占有サイズ

widthプロパティで使用されるすべての単位(px、%、em、remなど)をプロパティ値

に使用できます.

auto(デフォルト):flex itemは相対flex item(相対flex item)であり、コンテンツのサイズに応じてサイズを決定する(width値がない場合、コンテンツのサイズ)

0:flex itemが絶対flex item(絶対flex item)となり、flex容器により大きさを決定

元の幅の値が設定値より大きい場合は、元の値

を保持します.
2)flex-grow:flex-basic値より大きくできるかどうか(拡張)

0(デフォルト):flex containerが大きくなるにつれてflex itemのサイズは大きくならず、元のサイズに維持されます.

1以上:flex itemは、flex itemの元のサイズに関係なくflex containerを充填するために大きくなります.

数字の意味:項目のflex-basicを除き、空白部分はflex-growで指定した数字の割合で区分されます.→空白以外の領域を所望の割合に分割する場合、flex-basicは0

に処理される理由
3)flex-schrif:flex-bases値より小さくできるかどうか(折りたたみ)

1(デフォルト):flex containerのサイズがflex itemのサイズより小さい場合、flex itemのサイズはflex containerのサイズとともに減少します.

0:flex containerのサイズはflex itemのサイズより小さいが、flex itemのサイズは元のサイズに維持され、itemのサイズはflex-babisより小さくないため、固定幅の列を作成することができる.

→flex-shillが1の場合、ブラウザのwidth縮小時にspan(flex-item)内のテキストが2行になります.(容器が小さくなりitemが小さくなったので)0に設定して固定しました…!
4) flex : flex-grow + flex-shrink + flex-basis

initial(デフォルト):flex containerが小さくなるとflex itemが小さくなります.しかし、flex containerの大きさが大きくなってもflex itemの大きさは大きくなりません.(0 1 auto)

none:flex itemは大きくなったり小さくなったりしません.flexコンテナサイズの影響を受けず、flexアイテムの元のサイズを維持します.(0 0 auto)

auto:flex containerのサイズに従ってflex itemが大きくなるか小さくなる.(1 1 auto)

양의 정수:flex containerは一定の割合で分かれており、flex containerの大きさによってflex itemが大きくなったり小さくなったりします.( d d auto)

5)align-sself:項目を垂直に整列

デフォルト:auto(align-items設定を継承)

6)order:表示順序の決定

小さい数字ほど早く配置されます.HTML自体の構造を変更しない

7) z-index

数字が大きいほど上へ.

8)marginでflex-itemを展開する
水平配置

margin-right: auto:flex itemを右から左にスライドさせ、右側のすべてのスペースを占有します.

margin: 0 auto:外部マージンがflex itemを両側から押し通すため、flex itemは水平中央に位置する.

margin-left: auto:flex itemを左から右にスライドさせ、左側のすべての空間を占有します.

垂直配置

margin-bottom: auto:flex itemを下から上へ押して、外の距離がすべての空間を占めることを確保します.

margin: auto 0:flex itemを外部余白で上下に押すため、flex itemは垂直中央に位置する.

margin-top: auto:flex itemを上から下に押して、外部の余白が上のすべての空間を占有するようにします.

見出しの配置

margin-bottom : auto;

プロペラ配置

margin-top : auto;

一元的なソート

    .flex_container {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    //or
    
    .flex_container {
      display: flex;
    }
    .flex_item {
      margin: auto;
    }   

リファレンス
https://d2.naver.com/helloworld/8540176
https://studiomeal.com/archives/197