javascriptの階段

スイッチ
フレキシブルスイッチ
＊
aniuse.comは元素互換性ネットワークを参照してください.
*自分のサブ要素divを上に並べる{親要素制御子方式}display:-webkit-box{古いバージョン}display:-webkit-flex｛新バージョン互換性強化｝
＊親要素ボックスに設定する属性:サブ要素の表示を制御する方法
//弾性箱モデルではflexが起動されていません.多くの属性のflex-direction属性を使用して表示の方向を決めることができません.
flex-wrapflex-wrap属性は定義されています.一列に並ばないと、どのように改行しますか?
flex-flow属性はflex-direction属性とflex-wrap属性の簡潔な形式で、デフォルト値はrow nowrapです.
justify-contentプロパティは、アイテムの水平方向の配置を定義します.
align-items属性定義項目は垂直方向にどのように配置されますか?
align-content属性は、複数行の配置を定義している.アイテムが1行だけの場合、この属性は機能しません.

flex-direction:row row-reverse|column-reverse;

rowのデフォルト値は、左揃えの順にrow-reverseを表示します.右揃えの順序は、column縦の順序で表示されます.column-reverse縦の逆順で表示されます.
flex-wrap:nowrap𞓜wrap-reverse;
nowrapデフォルト値は改行しない(同じ行のテキストは改行しない)wrap改行はwrap-reverse改行を表示します.逆方向に表示されます.
*justifty-content:flex-start|flex-endセンター|space-between space-around;flex-start標準値の開始位置を揃える
flex-end終了位置の配置
センター?センター
space-betweenは両端に揃えられています.項目間の間隔は同じです.space-aroundは各プロジェクトの両側の間隔が同じです.したがって、項目間の間隔は、項目と外枠の間隔の2倍以上になります.(maginと)(両側には対応間隔があります)
*align-items:flex-start|flex-endセンター-124; baseline|streetch;flex-start上端にflex-endの下端を揃えてセンターを中央に配置します.
baselineの最初の行のテキストの下のベースラインが揃えられます.streetch(デフォルト値):プロジェクトに高さが設定されていない場合、またはautに設定されていない場合、容器全体の高さを占めます.
align-content:flex-start|flex-endセンター-124; space-between|space-around street ch;
flex-startの上端にflex-endの下端を揃えてセンターを中央に配置します.space-betweenの両端に配置して、行ごとの間隔を均等にします.
space-aroundの両端には、各項目の上下の間隔が等しいため、2行の項目間の間隔はシングルの2倍です.
streetch(デフォルト値):もしプロジェクトに高さが設定されていない場合、またはautとして設定されていない場合、各行は箱の高さを均等に分けます.
＊サブ要素項目に設定する属性:サブ要素自体の表示を制御する
order属性は、項目の並び順を定義します.数値が小さいほど、前に並べば並べるほど、デフォルトは0です.簡単に言えば、orderの大きさによってdivの出発順を感じることです.(1)｛flex-grow:1;order:4;｝唴上box div:nth-child(2).

        }

flex-grow:箱の弾性空間を定義する具体的な数字の割合