CSSの基本を理解する #2
positionとflexboxについて学習した。
position
positionは、ボックスの位置が相対位置か絶対位置かを指定するプロパティ。かなりよく使うしこれがないと始まらない重要なプロパティ。 top,bottom,left,rightのプロパティと組み合わせて使うことが多い。
static
位置を指定できない要素。なのでtopやleftなどを指定しても意味がない。実際にはほぼ使われないのであまり覚えておかなくてもよい。 positionのデフォルト値。
relative
基準位置からの相対位置への配置。 基準位置というのはstaticを指定したときの場所のことを指す。 なので、relativeを指定してもtop、right、bottom、leftプロパティを何も指定しないとstaticと同じ表示位置になる。
absolute
基準位置からの絶対位置への配置。 基準位置は親ボックスの左上になる。
ただしこれは親ボックスにstatic以外の値が指定されている場合に限る。 親ボックスにstaticの値が指定されている場合は、基準は親ボックスではなくウィンドウ全体の左上が基準位置になるので注意。
fixed
絶対位置への配置となるのはabsoluteと同じだが、スクロールしても位置が固定されたままとなる。
relativeとabsoluteの違いや、指定するとどういう挙動をするのかがなかなか理解できなかったけど、この２つは基準にするボックスが違うということが理解できてからは使い方がわかってきたような気がする。
参考
flexbox
flexboxは「Flexible Box Layout Module」のことで、CSSでのレイアウト設定を簡単にするレイアウトモジュール。 これを使うとボックスを簡単に横並びすることができるし（縦もできる）、並び順を左からか右からかの指定もプロパティ１つで簡単にできる。 複雑なレイアウトはflexboxを使うと良い。
flexコンテナとflexアイテム
flexコンテナは、後述するflexアイテムを内包する親要素。
flexアイテムの並び位置（縦並びか横並びか）、折返し、並び順などの指定はflexコンテナ側に記述する。
要素をflexコンテナに指定するにはdisplay: flex;を記述すれば良い。
.flexbox{
display: flex; /*flexコンテナとして指定*/
}
親要素がflexコンテナーであれば自動でflexアイテムとして扱われる。 flexboxを使用するために必要な設定はflexコンテナ側に記述するので、flexアイテムはflexアイテムであることを強く意識しなくても大丈夫そう。
