参考情報
- coliss: CSS Flexbox の基礎知識と使い方をやさしく解説 link
- 各プロパティの詳細な説明や概観理解はこちらを参照した方がよいと思います
例html
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
css
.flex-container {
display: flex; /* 子要素がflexアイテムになる */
display: inline-flex; /* インライン要素をflexアイテムにしたい場合 */
/* flexコンテナの主軸の方法を */
flex-direction: row /* 左から右の水平方向に設定する. default */
flex-direction: row-reverse /* 右から左の水平方向に設定する */
flex-direction: column /* 上から下の垂直方法に設定する */
flex-direction: column-reverse /* 下から上の垂直方向に設定する */
/* flexコンテナのwrap方法を指定 */
flex-wrap: nowrap; /* 複数のアイテムを1行に配置する. default */
flex-wrap: wrap; /* 必要に応じてflexアイテムを左から右、上から下に複数行に配置する */
flex-wrap: wrap-reverse; /* flexアイテムを左から右、下から上へ複数行に配置する */
/* flex-directionとflex-wrapをまとめて設定する */
flex-flow: <flex-direction> || <flex-wrap>;
flex-flow: row nowrap; /* default */
/* flexコンテナの主軸に剃ってflexアイテムを1行に配置する */
justify-content: flex-start; /* モードに従い、flexコンテナの左側に配置される. default */
justify-content: flex-end; /* モードに従い、flexコンテナの右側に配置される */
justify-content: center; /* flexコンテナの中央に配置される */
justify-content: space-between; /* 最初と最後のアイテムは端に、残りは等間隔で配置される */
justify-content: space-around; /* 等間隔のmarginを持ったアイテムが等間隔に配置される */
/* flexコンテナのクロス軸に垂直方向で配置する
align-items: stretch; /* flexアイテムはflexコンテナの高さ（または幅）いっぱいに配置される */
align-items: flex-start; /* flexアイテムはクロス軸の視点に配置される. 上側とか */
align-items: flex-end; /* flexアイテムはflexコンテナのクロス軸の終点に配置される. 下側とか */
align-items: center; /* flexアイテムはflexコンテナのクロス軸の中央に配置される */
align-items: baseline; /* flexアイテムはベースラインに沿って配置される. ベースラインはggr */
}
.flex-item {
/* flexアイテムの相対配置順位を指定する */
order: <integer>
/* フリーのポジティブなスペースがある場合、 */
/* flexアイテムが他のflexアイテムと比較してどのくらいの大きさになるかを指定する */
flex-grow: <number>;
flex-grow: 0; /* 伸長しない. default */
/* フリーのネガティブなスペースがある場合、 */
/* flexアイテムが他のflexアイテムと比較してどのくらい縮まるかを指定する */
flex-shrink: <number>;
flex-shrink: 0; /* オリジナルのサイズを維持する */
flex-shrink: 1; /* default */
/* flexアイテムの最初のメインとなるサイズを指定する */
flex-basis: auto | <width>;
flex-basis: 350px; /* デフォルトのサイズを350pxに指定する */
flex-basis: auto /* default */
/* flex-grow, flex-shrink, flex-basisを指定するショートハンド */
/* w3c推奨 */
flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
flex: 0 1 auto; /* default */
/* 個別のflexアイテムのalign-items値を指定する */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
align-self: auto; /* default */
}