学んだこと、日常

blog

理解したいCSS①FlexBox

普段何となく使用して、ある程度分かったような気になってしまっていた、cssですが、まだまだ全然理解できてない部分があることに気が付き始めました(遅い)

理解の浅かったところをその都度アウトプットしていきたいと思います。

FlexBoxについて

今回は、FlexBoxについて。

FlexBoxとは横並びにしたい際に使用する認識(flex-directionの指定次第で縦並びにすることもできるらしい)。そのFlexBoxの私が使用する際によく概念を忘れてしまう、水平方向の揃え方について認識を深めていきたいと思う。

justify-contentプロパティ

①justify-content:space-between

space-betweenは子要素の最初と最後を端に揃えその他を均等に配置。

②justify-content:space-around

全ての要素の周りに均等に空間を配置

③justify-content:space-evenly

全ての空間を均等に配置

④justify-content:center

中央揃え

その他にもflex-start(左揃え)やflex-end(右揃え)等がある。

使用する中でこれらの認識が甘いことに気が付いたのでまとめてみました。

今後も認識のあまいものはこのようにアウトプットして自分の頭に染み込ませたいと思います。

contact