flexboxはとても便利。

flexboxスタイルはCSSでのレイアウトに際してとても便利。とても良く使う。なのに覚えて無いので毎回検索してしまう。ジェネレータを作ったりなんかもしたけれどもユースケースを書いたほうが早いのではとも思ったのでココに記す。

等間隔並べ左詰め

/* コンテナ */
.container {
    display: flex;
  flex-wrap: wrap;
    margin: -1em;
}
/* 要素 */
.container > * {
flex: 0 0 calc(25% - 2em);
margin: 1em;
}

上記例は1em間隔で4つの要素を配置する例。コンテナのネガティブマージンを利用することで、親要素の左右とつらをピッタリ合わせることができる。

縦センター揃え

/* コンテナ */
.container
{
    display: inline-flex;
    align-items: center;
}
/* 要素 */
.container > *
{
    margin-right: 0.5em;
}
.container > *:last-child
{
    margin-right: 0.0em;
}

画像アイコンとテキストなどを縦位置センターで揃える場合などに利用する。