cssのフレキシブルレイアウトと携帯電話の適応

css携帯電話適応viewportビューポートwidth=device-width幅画面の幅に等しいinitial-scale=1.0伸縮スケール1.0 maximum-scale=3.0最大伸縮スケールminimum-scale=1.0最小伸縮スケールuser-scalable=noユーザースケール禁止:
/固定モードレイアウトフローレイアウト100%フレックスレイアウトflex(携帯端末はtableに類似)/1.display:flex; 容器を弾性レイアウト2に変換する.flex-direction: column; 中の要素をどのように配置するかを規定しますrow column反転3.align-itemsサブエレメントはy軸上で中心flex-end底辺flex-start上辺stretchを垂直に4.justify-content x軸整列center中央flex-end右整列flex-start左整列space-between左右両側整列中間平分pace-aroundはすべての空白5を分ける.flex-wrap: wrap; 行の中を改行する.align-content: space-between; 行の中で行留白を使うと効果があります.flex: 1; 行の中の要素は空間を割り当てて等分に分けます

    .fl{
        width: 400px;
        height: 600px;
        border: 1px solid red;
        margin: auto;
        display:flex;
        flex-direction: column;
    }
    .row,.row1{
        width: 400px;
        height: 100px;
        border-bottom: 1px solid blue;
        display: flex;/*  flex*/
        flex-direction: row;
       /* align-items      y          center     flex-end      flex-start      stretch     */
       /* align-items:stretch;*/
        /*justify-content x      center     flex-end       flex-start        space-between            
        space-around        */
       /* justify-content: center;*/
       /* align-items: center;*/

        flex-wrap: wrap;
        /*             */
        align-content:space-between;

    }
    .row>div{
        width: 50px;
        height: 30px;
        border: 1px solid black;
    }
    .row1>div{
        /*           flex*/
       /* flex: 10;*/
        width: 50px;
        height: 30px;
        border: 1px solid black;
    }
   /*.row1>div:nth-child(1){
        flex: 1;
    }
    .row1>div:nth-child(2){
        flex: 2;
    }
    .row1>div:nth-child(3){
        flex: 3;
    }
    .row1>div:nth-child(4){
        flex: 1;
    }*/


    .row2>div{
        width: 100px;
        height: 40px;
        border: 1px solid red;
    }