レイアウトの作成時に適用されるプロパティ:
📝 Flex-正式文書について説明しましょう.

1.容器と項目

flexプロパティを適用するには、親子関係が必要です.

容器と物品に適用される属性다르므로に注意してください.

flex-direction
基本方向はrow

flex-grow
itemの余白を共有する属性->傷つけられたような感じ
この값によれば、占有空間の사이즈は異なる(相対パーセント)

flex-basis
基本的なitem 크기の値です.

flex-shrink
デフォルトでは、flex-based値がある場合に使用できるプロパティです.
この値をゼロにすると、利己的に自分の空間を占有します.

2. Holy Grail Layout

Nav、Main、およびasideはsectionに、classに配置される.
ここでcontentプロパティを再度配置し、デフォルトのソートをrowに設定し、水平にソートします.
寸法はNavおよびasideに固定され、それぞれflexおよびflex-basisである.
Mainサイズだけ変えたのはHoly Grail Layout

   <style>
        .container{
            display: flex;
            flex-direction: column;
        }
        header{
            border-bottom:1px solid gray;
            padding-left:20px;
        }
        footer{
            border-top:1px solid gray;
            padding:20px;
            text-align: center;
        }
        .content{
            display:flex;
        }
        .content nav{
            border-right:1px solid gray;
        }
        .content aside{
            border-left:1px solid gray;    
        }
        nav, aside{
            flex-basis: 150px;
            flex-shrink: 0;
        }
        main{
            padding:10px;
        }
    </style>

3.その他の属性

📍 container

flex-direction
row flex-shrink = 0 row-reverse column

flex-wrap
nowrap column-reverse(道具改行)wrap

align-tems wrap-reverseの決定정렬 flex-start flex-end center仮想行に対応
コンテナに引き伸ばす

vide-コンテンツbaselineの決定수평 flex-start flex-end space-between center

aligin-content
グループとグループ間のソート

📍 item

aligin-self
各itemに属性を指定するには

flex
{flex : flex-grow [flex-shrink][flex-basis] }

oreder
使用->検索エンジン