Codepen が画面幅を表示してくれるのが Bootstrap の Grid 対応に便利だった話

そんなのできるツール色々あるよって話かもしれないんですけれど。

freeCodeCamp のプロジェクトで CodePen を使うんですけど、今回 Bootstrap の Grid を使うことにチャレンジしたので、ドラッグしてブラウザのウィンドウのサイズを変えると現在の画面幅を表示してくれるのが便利でした。

こんな感じ。

まだ Grid の仕組みがよくわかってない中で、画面幅を確認しながら表示がどう変わるか確認できるのがすごくわかりやすくて。同じ画面でコードもすぐ書き変えて試せるし。

Bootstrap の flex についてメモ

Flex · Bootstrap の話。

（BootstrapのDocument（上記リンク）より）

• d-flex でブロックレベルの入れ物を作って、flex-row (横) / flex-column (縦)で並べる方向を指定して、その中に子要素を並べていくイメージ
• 孫要素以下は影響を受けない。子要素のみに影響する。
• justify-content-center で子要素を「中央」に配置できるが、この時、水平・垂直どちら方向の中央になるかは flex-row か flex-columnかによる。
  flex-row なら横方向の中央、 flex-columnなら縦方向の中央に配置される
  （これでだいぶはまりました…常に横方向の位置を指定するクラスだと思い込んでいて）

Bootstrapのpとかmとか

これ何だっけ…？と毎回忘れてしまうのでメモ。
padding とか margin とかのspecing用のクラスです。

What does the `p-N` and its variants represent in Bootstrap v4?
https://stackoverflow.com/questions/42160532/what-does-the-p-n-and-its-variants-represent-in-bootstrap-v4

Spacing
https://getbootstrap.com/docs/4.1/utilities/spacing/