KinutaHandicraft - ヒント集 - ヒントだよ！HTML & CSS -

■ CSS その5

{displayディスプレイ:コンテナの形式;}、フレキシブルボックスのレイアウトを指定する。→ 使用例を表示
コンテナの形式:
- flex:ブロックレベル(大体の要素が配置できる)
- inline-flex:インラインレベル(インラインの要素が配置できる)
※HTML4当たりまでは、table系タグで左右の配置を調整していましたが、その後、左右で画面を分割して配置する場合に使っています。
{flex-directionフレックス-ディレクション:方向;}、フレックスアイテムの配置方向を指定する。→ 使用例を表示
方向
- row = 横方向
- row-reverse = 横方向逆
- column = 縦方向
- column = 縦方向逆
※HTML4当たりまでは、table系タグで左右の配置を調整していましたが、その後、左右で画面を分割して配置する場合に使っています。

{flex-wrapフレックス-ラップ:繰り返し;}、フレックスアイテムの折り返しを指定する。
{flex-flowフレックス-フロー:-direction -wrap;}、フレックスアイテムの配置方向と折り返しを指定する。
{orderオーダー:順序;}、フレックスアイテムを配置する順序を指定する。
{flex-growブレックス-グロウ:伸び率;}、フレックスアイテムの幅の伸び率を指定する。
{flex-shrinkフレックス-シュリンク:縮み率;}、フレックスアイテムの幅の縮み率を指定する。
{flex-basisフレックス-ベイシス:幅;}、フレックスアイテムの基本と幅を指定する。
{flexフレックス:-grow -shrink -basis;}、フレックスアイテムの幅をまとめて指定する。
{justufy-contentジャウスティ-コンエント:位置;}、ボックス全体の横方向の揃え位置を指定する。
{aling-contentアライン-コンテント:位置;}、ボックス全体の縦方向の揃え位置を指定する。
{place-contentプレイス-コンテント:align-content justify-content;}、ボックス全体の揃え位置をまとめて指定する。
{justify-selfジャスティフィ-セルフ:位置;}、個別のボックスの横方向の揃え位置を指定する。
{aling-selfアライン-セルフ:位置;}、個別のボックスの縦方向の揃え位置を指定する。
{place-selfプライス-セルフ:align-self justify-self;}、個別のボックスの揃え位置をまとめて指定する。
justify-itemsジャスティフィ-アイテムズ:位置、すべてのボックスの横方向の揃え位置をしていする。
{align-itemsアライン-アイテムズ:位置;}、すべてのボックスの縦方向の揃え位置を指定する。
{place-itemsプライス-アイテムズ:akign-items justify-items;}、すべてのボックスの揃え位置をまとめて指定する。

{displayディスプレイ:コンテナの形式;}、グリッドレイアウトを指定する。
コンテナの形式
- grid:ブロックレベルのグリッドコンテナ
- inline-grid:インラインレベルのグリッドコンテナ
{grid-template-rowグリッド-テンプレート-ロウズ:ライン名高さ;}、省略。
{grid-template-columnsグリッド-テンプレート-カラムス:ライン名幅;}、省略。
{grid-template-areasグリッド-テンプレート-エリアズ:名前;}、省略。
{grid-templateグリッド-テンプレート-:-rows - columns -areas;}、省略。
{grid-auto-rowsグリッド-オート-ローズ:高さ;}、省略。
{grid-auto-columnsグリッド-オート-カラム:幅;}、省略。
{grid-auto-flowグリッド-オート-フロー:配置方法;}、省略。
{gridグリッド:-template-rows -template-columns -template-aread -auto-rows -auto-colums -auto-flow;}、省略。
{grid-row-startグリッド-ロウ-スタート:グリッドライン;}、省略。
{grid-row-endグリッド-ロウ-エンド:グリッドライン;}、省略。
{grid-rowグリッド-ロウ:-start -end;}、省略。
{grid-column-startグリッド-カラム-スタート:グリッドライン;}、省略。
{grid-column-endグリッド-カラム-エンド:グリッドライン;}、省略。
{grid-columnグリッド-カラム:-start -end;}、省略。
{grid-areaグリッド-エリア:grid-row-start grid-column-stat grid-row-end grid-column-end;}、省略。
{row-gapロウ-ギャップ:間隔;}、省略。
{column-gapカラム-ギャップ:間隔;}、省略。
{gapギャップ:row- column;}、省略。