Flexbox CSS コードまとめ

.parent {
  margin: 10px -10px -10px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  .child {
    align-self: center;
    flex-basis: calc(50% - 10px);
    max-width: calc(50% - 10px);
    margin: 5px;
    font-size: 0;
  }
}

1. 親要素にflexプロパティの指定

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

2. 子要素同士の間の幅の半分の数をmarginに指定

.child {
  margin: 5px; //子要素同士の間の幅10pxの場合
}

3. 子要素 指定したmarginの倍の数をflex-basisから引く

.child {
  flex-basis: calc(50% - 10px); //1行に2個表示の場合
  flex-basis: calc(33.33% - 10px); //1行に3個表示の場合
  flex-basis: calc(25% - 10px); //1行に4個表示の場合
}

4. 親要素にマイナスmarginを指定

子要素のmargin分、幅が狭くなるので、親要素にマイナスmarginを指定。
両端とbottomはマイナス、topはプラス。

.parent {
  margin: 10px -10px -10px; //top left/right bottom
}

メモ1

justify-content: space-between;を指定＋子要素にmarginなしだと、最後の行の要素が端に寄る。
clearfixのcssが設定されているときに、divにafter要素が追加されていると、子要素の並びにafter要素が入るため。

justify-content: flex-start;を指定＋子要素にmargin設定＋flex-basisでcalcで指定する幅からmargin分引くと寄らない。

flexboxのjustify-contentでspace-betweenをすると、余った要素が両端によってしまうのを直したい

メモ2

子要素に画像があり画像の下に余分な空白ができる場合、font-size: 0を指定すると消える。

.child {
  font-size: 0;
}

メモ3

flexショートハンド（まとめて指定）のcalcはIEで効かないため、使用しない。flex-basisで指定。

.child {
  flex: 0 1 calc(50% - 10px); //IEで崩れる
  flex-basis: calc(50% - 10px); //IEでも崩れない
}

flexboxのバグに立ち向かう（flexboxバグまとめ）

メモ4

IEでカラム落ちするので、max-widthも同時に指定する。
IEではpaddingを指定しているとき、box-sizing: border-boxが効かない。

.child {
  flex-basis: 340px;
  max-width: 340px;
}

IE11でflex-basisの値にbox-sizing: border-boxが効かないバグ