[CSS] flex

14819 ワード
テキストリンク
レイアウトで広く使われているflexというやつについてお話しします.

ツールバーの


flexは、ソートするアイテムごとにコンテナロールの親タグを指定する必要があります.親ラベルまたは子ラベルの位置が異なる属性もたくさんあります.
<container>
  <item></item>
  <item></item>
</container>
親コード:<container>サブコード:<item>定義時、
// 부모태그 컨테이너
<container />
  display
  flex-direction
  flex-wrap
  flex-flow
  justify-content
  align-items
  align-content

// 자식태그 정렬대상
<item />
  order
  flex-grow
  flex-shrink
  flex-basis
  flex
  align-self
本当に.プロジェクトをするのに苦労した部分が上のコードの内容です.
どの部分にどの属性を適用すべきかは毎回分からないようです.

flex-grow


私たちは生活符号化で提供されたコードを使用して文章を書きました.次のコードは文章を続けます.
<!doctype>
<html>
<head>
    <style>
        .container{
            background-color: powderblue;
            height:200px;
            display:flex;
            flex-direction:row;
        }
        .item{
            background-color: tomato;
            color:white;
            border:1px solid white;         
        }

        .item:nth-child(2){

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

  • flex-grow:子供のラベルnを両親にバタンと分けさせます.
  • 注意
  • flex-grow(0): 설정값이 0이기에 아무런 변화 X
  • flex-grow(1): 아래와 같이 변화


    • ここで特定の物の大きさを調整したい場合は、
    .item:nth-child(2)
  flex-grow:2;
    残りのアイテムのgrowは1人状態で、2番目のアイテムだけが2人状態です.
    2のものだけを持っていくとスペースが大きくなることがわかります.3、4++が占める空間はもっと大きくなります.

    flex-shrink


    flex-basesの値を持つと、baseの値を減らします.
    .item:nth-child(2)
  flex-grow:2;
  • flex-shrink: 0:大小変化なし
  • flex-shrink: 1:縮小
  • flex-shrink: 2:大きさ変化1よりも早く減少.3 4も同じです

    完全なコード

    • <!doctype>
<html>
<head>
    <style>
        .container{
            background-color: powderblue;
            height:200px;
            display:flex;
            flex-direction:row;
        }
        .item{
            background-color: tomato;
            color:white;
            border:1px solid white;         
        }
        .item:nth-child(1){
            flex-basis: 150px;
            flex-shrink: 1;
        }
        .item:nth-child(2){
            flex-basis: 150px;
            flex-shrink: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

    その他のプロパティー

  • holy grail layout
  • その他
    • 属性の特質を詳しく読む
    バックアップ2667-DFSソリューション(Python)