22.04.20も紛らわしいFLEX…

8392 ワード
テキストリンク

FLEXのコンセプトをマスター!!

  • の親ラベルに「flexを定義」と表示されます.
    • <div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
    .container {
  background-color:royalblue;
  display:flex;
}
.container .item {
  width:100px;
  height:100px;
  border:3px dashed red;
  background-color:orange;
}
    結果

    flex-directionタイプ

  • 行軸(左=>右)
  • row-反転軸(右=>左)
  • 列軸(上=>下)
  • 列-逆熱軸(下=>上)

    • flex-wrap

  • 改行なし
  • wrapマルチライン組合せ
  • wrap-逆wrapの逆組み合わせ

    • justify-content


    主軸の位置合わせ
  • flex-start(Flex Itemsを起点とする)
  • flex-end(Flex Itemsを端点としてソート)
  • center(Flex Itemsを中央に)

    • align-content


    交差軸の複数行を整列するには、次の手順に従います.
  • stretch(Flex Itemsを起点とする)
  • flex-start(Flex Itemsを起点とする)
  • flex-end(Flex Itemsを端点に位置合わせ)
  • center(Flex Itemsを中央に)

    • align-items

  • ストレッチ(Flex Itemsを交差軸まで延長)
  • flex-start(Flex Itemsを各行の始点に並べる)
  • flex-end(Flex Itemsを各行の端点に位置合わせ)
  • center(Flex Itemsを中央に1行並べる)

    • を選択します。

    <div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
    .container {
  background-color:royalblue;
  display:flex;
  justify-content:center;
  width:500px;
  height:300px;
  align-items:center;
}
.container .item {
  width:100px;
  height:100px;
  border:3px dashed red;
  background-color:orange;
}
    pytorchはCNNモデル(spatial XuNet)のロードテストモデルを実現する
    匿名の内部クラステストの注意事項