自作CSSメモ・備忘録
フロントエンドの学習を進めているのですが、めちゃくちゃ難しいと感じています。
覚えることが多すぎるし、仕組みがちゃんとわかっていないままflexboxやJavaScriptを書こうとして、結局わけがわからなくなる……そんなことの繰り返しです。
自分の中で「知識がバラバラだな」と思う場面が増えてきたので、いったん頭の中を整理しつつ、体系的に学んだことを記録していく場所としてこのブログを始めることにしました。
ここには、つまずいたこと、学んだこと、理解したことをメモのように積み上げていく予定です。
「自分のための記録」ですが、同じように悩んでいる人のヒントにもなれば嬉しいです。
Flexboxについて
1. メモ
flex-direction
デフォルトはrow
フレックスアイテムが並ぶ主軸を指定することができる。
配置の向き
row →
row-reverse ←
column ↓
column-reverse ↑
flex-wrapについて
違い 子要素が折り返せるか折り返せないか。
flex-wrap: nowrap（初期値）
子要素が折り返せない。スペースが足りなくても縮んで一行に収まるようになる。
| [ item1 ][ item2 ][ item3 ][ item4 ][ item5 ] |
（はみ出しても1行に並べる）
flex-wrap: wrap
子要素は折り返して複数行になる。はみ出しそうになったら自動で折り返す。
| [ item1 ][ item2 ][ item3 ] |
| [ item4 ][ item5 ] |
（はみ出しそうになったら次の行へ）
justify-contentについて
フレックスアイテムが主軸上でどのように配置されるべきかを決定。主軸上なのでflex-directionと組み合わせた場合垂直方向になることも考えられる。
flex-start
左寄せ
| [①][②][③] |
flex-end
右寄せ
| [①][②][③] |
center
中央寄せ
| [①][②][③] |
space-between
両端揃え＆均等配置
| [①] [②] [③] |
space-around
Bootstrapの時はjustify-content-around になる
前後均等スペース
| [①] [②] [③] |
align-itemsについて
フレックスアイテムが体軸上でどのように配置されるべきかを決定
flex-start
上寄せ
| [1][2] |
| [3][4] |
| |
↑ 上に寄せる
flex-end
下寄せ
| |
| [1][2] |
| [3][4] |
↑ 下に寄せる
center
上下中央寄せ
| |
| [1][2] |
| [3][4] |
| |
↑ 中央に寄せる
space-between
行と行の間を等間隔
| [1][2] |
| |
| [3][4] |
↑ 上下の端にくっつけ、中央に均等なスペース
space-around
上下に均等なスペース
| |
| [1][2] |
| |
| [3][4] |
| |
↑ 各行の上下に均等な余白
stretch（デフォルト：行が高さ方向にびよーんと引き伸ばされる）
| [1][2] |
| [3][4] |
（行の高さがコンテナに合わせて引き伸ばされる）
containerについて
containerは、画面の幅に応じてレスポンシブな固定幅のコンテナを提供する。
container クラスの各ブレークポイントでの max-widthの値 は以下のようになります。
- 576px 未満 : 100%
- 576px 以上 768px 未満 : 540px
- 768px 以上 992px 未満 : 720px
- 992px 以上 1200px 未満 : 940px
- 1200px 以上 : 1140px
container-fluid
幅全体をカバー
Bootstrapグリッドシステムについて
コンテナ（container）、列（column）、行（row）によって構成される。
<div class='container'>
<div class='row'>
<div class='col'>
<p>I am grid.</p>
</div>
</div>
</div>
Bootstrap で定義されている各ブレークポイント
col-：576px 未満で表示
col-sm-：576px 以上で表示
col-md-：768px 以上で表示
col-lg-：992px 以上で表示
col-xl-：1200px 以上で表示
Discussion