flexboxで横並びにしたboxを等間隔で調節する&ボディメイク

ikedaです。

今日はCSSで便利なプロパティを見つけたので紹介したいと思います。

flexboxで横並びにした後に、ul内のliをスムーズに等間隔に空けて調節ができないかと思い探していました。

.ul{
display: flex;
column-gap: 20px;
}

これだけです。

column-gapは横並びですが、column-rowで縦並びに反映されます。

margin-leftやmargin-rightを使っても調節はできるのですが、column-gapは要素の間のみが反映されるので、最初と最後のliの外の余白は反映されません。

とてもいい便利なプロパティかと思うので、これからも利用していきたいと思います。

 

さて、最近はボディメイクに完全にスイッチが入りまして、日々の食事と運動を記録して生活しています。

昔体を作り込んでいた時期に飲んでいたサプリやプロテイン、MTCオイル、BCAAなどを摂取してがっつりやっています。

というのも少し前に寝込んでしまった際に体重がかなり増加していしまいまして、、、泣

取り戻す&その向こう側へ←、向かって行こうと決心しまして絶賛奮闘中です。

単純に体重を減らすことだけを考えるのではなく、pfcバランスをある程度管理しつつ筋肉量を増量させるダイエットなので、体重計の数字だけを見るというよりは緩やかな体脂肪率低下と見た目重視で進めていくイメージです。

とりあえず3ヶ月後の6月の一日まで継続していきたいと思います。

ikedaが継続できているかはこのブログを見ていただければ不定期ではありますが更新していきますので、あまりにもダイエットに関する更新がなけれは『こいつ諦めたなと』と思っておいて下さい。。笑

年々、お腹周りの脂肪が落ちにくくなっているので多少時間はかかるかと思いますが、焦らず着実に成果を出していきたいと思います。

では、今日もお疲れ様でした。

WEB制作・ITに関するお悩みや
ご質問等お気軽にご相談ください

contact

この記事の著者

コメントする

関連記事