はじめに
フレックスボックスの学習備忘録です。
学習方法
FLEXBOX FROGGYは、ゲーム形式にフレックスボックスを楽しく学べます。
FLEXBOX FROGGYを最後まで行うと下記のスタイルがわかるようになります。
Q24
#pond {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;
}
フレックスボックスのまとめ
justify-content: 横方向に移動する
* flex-start: アイテムはコンテナーの左側に並びます
* flex-end: アイテムはコンテナーの右側に並びます
* center: アイテムはコンテナーの中央に並びます
* space-between: アイテムはその間に等しい間隔を空けて表示されます
* space-around: アイテムはその周囲に等しい間隔を空けて表示されます
* space-around: 周辺に等しいスペースを空ける
* space-between: 間に対して均等にスペースを空ける
justify-contentの例
#pond {
display: flex;
justify-content: flex-end;
}
align-items : 縦方向に移動する
* flex-start: アイテムはコンテナーの上部に並びます。
* flex-end: アイテムはコンテナーの下部に並びます。
* center: アイテムはコンテナーの垂直方向中央に並びます。
* baseline: アイテムはコンテナーのベースラインに表示されます。
* stretch: アイテムはコンテナーの大きさに合うよう広がります。
align-itemsの例
#pond {
display: flex;
justify-content: center;
align-items:center;
}
flex-direction : 軸の方向を変える
row: アイテムは文章と同じ方向に配置されます。
row-reverse: アイテムは文章と逆の方向に配置されます。
column: アイテムは上から下に向かって配置されます。
column-reverse: アイテムは下から上に向かって配置されます。
order : アイテムの順序を指定する
アイテムはデフォルトでは0の値を取ります。
１以上は右へ移動します。
左に置きたい場合は-1以下を指定します。
orderの例
#pond {
display: flex;
}
.yellow {
order: 1
}
align-self : 個別のアイテムへ設定できるプロパティー
align-selfの例
#pond {
display: flex;
align-items: flex-start;
}
.yellow {
align-self:flex-end
}
flex-wrap: アイテムを強制的に１行にまとめるか、改行させるか制御する
nowrap: 全てのアイテムは、ひとつの行にフィットします。
wrap: アイテムは他の行へ折り返します。
wrap-reverse: アイテムは逆順になって他の行へ折り返します
flex-wrapの例
#pond {
display: flex;
flex-wrap: wrap;
}
flex-directionとflex-wrapの二つのプロパティーはよく一緒に使われるため、これらを統合するショートハンドプロパティーflex-flowが作られました。
このショートハンドプロパティーは空白文字で分割した二つのプロパティーの値を受け付けます。
flex-directionとflex-wrapを２つを省略できるよ
#pond {
display: flex;
flex-flow: column wrap
}
align-content: 複数の行が他の行とどう距離を取り広がるのかを指定する
flex-start: 行はコンテナーの上側に詰められます。
flex-end: 行はコンテナーの下側に詰められます。
center: 行はコンテナーの中央に詰められます。
space-between: 行はその間に等しい間隔を空けて表示されます。
space-around: 行はその周囲に等しい間隔を空けて表示されます。
stretch: 行はコンテナーに合うよう引き延ばされます。
align-contentの例
#pond {
display: flex;
flex-wrap: wrap;
align-content:flex-start;
}
↧