TIL-201212学習機

6930 ワード
TIL FLEXBOX FROGGY テキストリンク
これは試合前の最初の週末です!
堅苦しいグーグル学習よりも、面白いコードサイトを一緒にするともっと面白くなり、理解も速くなります.
だから今日のコードサイトはFLEXBOX FROGYでCSSコードゲームです.
https://flexboxfroggy.com/#ko
スペースに合ったコードを使うと、カエルは修練葉に入ります.

ステップ1




prevident-contentプロパティは、次の値をパラメータとして受け入れ、要素を水平線でソートします.
  • flex-start:コンテナの左側に要素を配置します.
  • flex-end:エレメントをコンテナの右側に並べます.
  • center:コンテナの横線の真ん中に要素を並べます.
  • space-tween:要素間に同じ間隔があります.
  • space-andrough:要素の周囲に同じ間隔を設定します.

    • 第一段階正解

    justify-content: flex-end;

    ステップ2



    第2段階正解

    justify-content: center;

    手順3



    第3段階正解

    justify-content:space-around;

    手順4



    手順4正解

    justify-content:space-between;

    手順5




    align-itemsプロパティは、次の値をパラメータとして受け入れ、垂直線上で要素をソートします.
  • flex-start:コンテナの上部に要素を配置します.
  • flex-end:コンテナの下部に要素を配置します.
  • center:コンテナの縦線の真ん中に要素を並べます.
  • ベースライン:エレメントをコンテナの開始位置に配置します.
  • stretch:コンテナに要素を追加します.

    • 5次正解

    align-items: flex-end;

    ステップ6



    6次正解

    justify-content: center;
align-items: center;

    ステップ7



    手順7正解

    justify-content:space-around;
align-items:flex-end;

    ステップ8




    flex-directionプロパティでは、コンテナ内の要素が整列する方向を指定するために、次の値をパラメータとして受け入れます.
  • row:要素をテキストの方向に揃えます.
  • row-reverse:要素をテキストの反対方向に並べます.
  • 列:要素を上から下に並べます.
  • column-reverse:要素を下から上に並べます.

    • 手順8正解

    flex-direction:row-reverse;

    ステップ9



    9階正解

    flex-direction:column;

    ステップ10



    手順10正解

    flex-direction:row-reverse;
justify-content:flex-end;

    ステップ11



    11階正解

    flex-direction:column;
justify-content:flex-end;

    ステップ12



    十二次正解

    flex-direction:column-reverse;
justify-content:space-between;

    ステップ13



    13階が正しい

    flex-direction:row-reverse;
justify-content:center;
align-items:flex-end;

    ステップ14




    orderプロパティは、Flex要素の順序を指定します.
    既定値は0で、正または負の値に変更できます.

    14次正解

    order:1;

    ステップ15



    15次正解

    order:-3;

    ステップ16




    align-sselfプロパティは、各要素に適用できる別のプロパティです.
    align-itemsでは、指定した要素にのみ適用される(flex-start、flex-end、center、baseline、stretch)パラメータとして使用されます.

    16次正解

    align-self:flex-end;

    ステップ17



    17次正解

    order:2;
align-self:flex-end;

    ステップ18




    flex-wrapプロパティは、Flex要素を1行または複数行に並べます.
  • nowrap:すべての要素を1行に並べます.
  • wrap:要素を複数行に並べます.
  • wrap-reverse:要素を複数行で逆ソートします.

    • 18階正解

    flex-wrap:wrap;

    ステップ19



    19階正解

    flex-direction:column;
flex-wrap:wrap;

    ステップ20




    flex-flowプロパティは、flex-directionおよびflex-wrapの簡略化されたプロパティです.
    このプロパティは、2つのプロパティの値をパラメータとしてスペース文字で受け入れます.

    手順20正解

    flex-flow:column wrap;

    ステップ21




    align-contentプロパティは、縦線に余分なスペースがある場合にFlexコンテナ間の間隔を調整します.
  • flex-start:複数の行をコンテナの上部に配置します.
  • flex-end:複数の行をコンテナの下部に配置します.
  • center:コンテナの縦線の真ん中に複数の線を並べます.
  • space-tween:複数行の間に同じ間隔があります.
  • space-andrough:複数行の周囲に同じ間隔を設定します.
  • stretch:複数の線をコンテナに追加します.
    • align-content vs align-items
  • align-content:複数行の間隔を指定します.1行のみの場合、効果は表示されません.
  • align-items:コンテナ内のすべての要素をソートする方法を指定します.

    • 21階正解

    align-content:flex-start;

    ステップ22



    ステップ22が正しい

    align-content:flex-end;

    ステップ23



    23階正解

    flex-direction:column-reverse;
align-content:center;

    ステップ24



    ステップ24が正しい

    flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;
    問題量は多いですが、カエルの移動はCSSの概念を再認識させてくれました.
    dockerのログローテーションrotateの具体的な実装
    OpencvのイメージフォーマットIplImageとCBitmapの変換