CSS Flexbox

以前は、position、float、tableを使用して、すべてのブラウザで互換性のある強力なレイアウトを作成するためにレイアウトを構成していました.
しかし、一部の機能は複雑すぎて、時間がかかり、制限されている.
ただし、flexboxを使用すると、すべてのレイアウトを簡単に行うことができます.
floatは、画像や文章を置くときに画像が左側に置かれるか、中央に置かれるか、右側に置かれるかを決定する属性です.レイアウトの時に使わざるを得ず、気分が悪くなった時にflexboxが現れ、floatは本来の目的で使われるような良い時代がやってきました.
flexboxは全部で2つを理解するだけで大きな図を理解することができます.
1つ目はflexboxがコンテナに適用可能な属性と、各プロジェクトに適用可能な属性を有することである.


コンテナに適用されるプロパティは上記のとおりです.
アイテムに適用される属性は次のとおりです.

containerプロパティ値

.container{
            background-color: coral;
            height: 100vh;
            display: flex;
            flex-direction: row; 
            flex-wrap: nowrap;
            justify-content: space-around; /* main axis */
            align-items: center; /* cross axis */
        }

display属性については、コンテナに適用される属性です.flexに設定し、コンテンツ内の項目を横方向にリストできるようにします.justify-content属性は、現在の主軸上の物品の順序を決定する属性である.align-itemsプロパティは、反対の軸にアイテムを配置する方法を決定します.align-content属性もあります.

item属性値

.item{
            width: 40px;
            height: 40px;
            border: 1px solid black;
            flex-grow: 1;
        }