#コンテナプロパティ
| プロパティ | 値 | 説明 | |
|---|---|---|---|
display | flexinline-flex | Flexコンテナを有効化 | |
flex-direction | rowrow-reversecolumncolumn-reverse | 主軸の方向を設定 | |
flex-wrap | nowrapwrapwrap-reverse | 折り返しを設定 | |
flex-flow | row nowrapcolumn wrap... | direction + wrapの短縮形 | |
justify-content | flex-startflex-endcenterspace-betweenspace-aroundspace-evenly | 主軸の配置 | |
align-items | flex-startflex-endcenterstretchbaseline | 交差軸の配置 | |
align-content | flex-startflex-endcenterstretchspace-betweenspace-around | 複数行の交差軸配置 | |
gap | 10px1rem10px 20px | アイテム間の間隔 |
#アイテムプロパティ
| プロパティ | 値 | 説明 | |
|---|---|---|---|
order | 01-1... | アイテムの順序 | |
flex-grow | 012... | 拡大比率 | |
flex-shrink | 01... | 縮小比率 | |
flex-basis | auto0100px50% | 初期サイズ | |
flex | 10 1 auto1 1 0... | grow shrink basisの短縮形 | |
align-self | autoflex-startflex-endcenterstretchbaseline | 個別の交差軸配置 |
#よく使うパターン
| プロパティ | 値 | 説明 | |
|---|---|---|---|
中央揃え | justify-content: centeralign-items: center | 完全な中央揃え | |
両端揃え | justify-content: space-between | 最初と最後を両端に | |
均等配置 | justify-content: space-evenly | すべて均等な間隔 | |
縦方向配置 | flex-direction: column | 縦方向のレイアウト | |
自動折り返し | flex-wrap: wrap | オーバーフロー時に自動折り返し | |
同じ幅 | flex: 1 | すべてのアイテムが同じ幅 | |
固定 + 可変 | flex: 0 0 200pxflex: 1 | サイドバー + メインレイアウト |
#flex短縮値
| プロパティ | 値 | 説明 | |
|---|---|---|---|
flex: initial | = flex: 0 1 auto | 縮小のみ、基本サイズ維持 | |
flex: auto | = flex: 1 1 auto | 拡大・縮小どちらも可能 | |
flex: none | = flex: 0 0 auto | 拡大・縮小不可、固定サイズ | |
flex: 1 | = flex: 1 1 0 | 余白を均等分配 |
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.