TIL

3988 ワード
TIL テキストリンク
(この内容は生活コードビデオから)
理由を探しますが、もしそうならbodyの初期値がおかしいので、再指定が必要で、そうであればよく行われます.

CSS


FLEXレイアウト


flexを使用するには、少なくとも2つのステップが必要です.
(親ラベルと子ラベルが必要です.)
ex)

<container> //부모 태그
  <item></item>//자식 태그
  <item></item>//자식 태그
</container>
親と子供に与える属性は分かれている.
(이미지 출처 : 생활코딩)

親ラベルfelxプロパティ


  • display:親にラベルdisplay : flexを付けると、子供たちが影響を受けます.display : flexをすると、基本的にflex-direction : rowとalign-items : stretchが適用されます.そのため、子供たちは行の方向に並んでいて、子供の長さも親の身長によって増加します.

  • align-items:子供を垂直にソートできます.

  • 正当な理由-内容:子供を水平に並べ替えることができます.

  • flex-direction:デフォルトはrowで、子を列でソートしたり、逆ソートしたりできます.
    🖐注意!
    列でソートするとalign-itemsが水平にソートされ、rivident-contentが垂直にソートされます.

    • サブラベルflexプロパティ


    サブflexプロパティを使用するには、親コレクタにdisplay:flexがある必要があります.

  • flex-growth:このプロパティは0と1を与えることができ、0の場合は変化しません.1を与えると、これらのタグは親の空間を1に分けます.
    flex-growを使用して特定のラベルにのみスペースを追加する場合は、上記のように1を与え、特定のラベルのコレクターを個別に指定してflex-grow値を与えることができます.

  • flex-schrif:flex-basic値は、画面が縮小するにつれてどのくらい減少しますか.flex-shrink : 0;であれば、画面が縮小しても基準値は保持されます.値下げが多ければ多いほど、値下げ時に負担する部分が大きくなります.

  • flex-base:デフォルトのサイズ値を指定できます.widthと同じだと思うかもしれませんが、flex-basicを使用するとflex-sriftを使用できます.

  • flex:flex-grow、flex-shill、flex-basic.これらのプロパティは一度に定義できます.ex) flex : 1 1 200px

  • align-self:現在のタグのみを垂直に並べます.

  • order:配置順序を変更できます.
    HTMLがnav、main、AD順に並べられている場合、

    • 位置はorderで変更できます.
    nav {
  order : 1;
    }
    
main {
  order : 0;
  }
  
AD {
  order : 2;
  }

    もっと簡単な方法で元の姿に戻ります.
    nav {
  order : -1;
  }
    mainは0なのでnavの小さい値-1を与えると元の値に戻ります.
    prototype , __proto__
    Node.jsとJavaScriptの学習(10日目)