.container {
  display: flex;
}
.inline-container {
  display: inline-flex;
}

.container {
  display: flex;
  &--row {
    flex-direction: row: //左から右に並べる
  }
  &--rowReverse {
    flex-direction: row-reverse; //右から左に並べる
  }
  &--column {
    flex-direction: column; //上から下に並べる
  }
  &--columnReverse {
    flex-direction: column-reverse; //下から上に並べる
  }
}

.container {
  display: flex;
  &--wrap {
    flex-wrap: wrap; //折り返して複数行
  }
  &--nowrap {
    flex-wrap: no-wrap; //単一行に並べる
  }
  &--wrapReverse {
    flex-wrap: wrap-reverse;  //折り返して複数行。下から上に並べる。
  }
}

.container {
  display: flex;
  flex-flow: row wrap; //flex-directionの値 flex-wrapの値
}

justify-content

初期値：flex-start

flexアイテムの左右の位置揃えを指定する。

flex-start

flexアイテムを左揃えにする

flex-end

flexアイテムを右揃えにする

flex-center

flexアイテムを中央揃えにする

space-between

flexアイテムを等間隔に配置する(最初と最後のflexアイテムは左右にくっつく)

space-around

flexアイテムを等間隔に配置する(全flexアイテムの左右に均等のマージンが開く)

.container {
  display: flex;
  &--start {
    justify-content: flex-start; //左揃え
  }
  &--end {
    justify-content: flex-end; //右揃え
  }
  &--center {
    justify-content: center; //中央揃え
  }
  &--between {
    justify-content: space-between; //最初と最後を端に、残り均等配置
  }
  &--around {
    justify-content: space-around; //等間隔配置
  }
}

align-items

初期値：strech

flexアイテムの上下の位置揃えを指定する。align-items: strechの登場でheightLine.jsとかでアイテムの高さを揃える必要がなくなった。

strech

flexコンテナの高さいっぱいにflexアイテムを配置する。この値のみ高さが揃う

flex-start

flexアイテムを上揃えにする

flex-end

flexアイテムを下揃えにする

center

flexアイテムを上下中央揃えにする

baseline

flexアイテム内のベースラインに揃える

.container {
  display: flex;
  &--stretch {
    align-items: stretch; //高さが揃う
  }
  &--start {
    align-items: flex-start; //始点揃え
  }
  &--end {
    align-items: flex-end; //終点揃え
  }
  &--center {
    align-items: center; //中央揃え
  }
  &--baseline {
    align-items: baseline; //ベースライン揃え
  }
}

align-content

初期値：strech

flexコンテナに余剰スペースがある場合の上下の位置揃えを指定する。

strech

flexコンテナ内に余白が生まれないようにflexアイテムを伸ばす

flex-start

flexアイテムを上揃えにする

flex-end

flexアイテムを下揃えにする

center

flexアイテムを上下中央揃えにする

space-between

flexアイテムを等間隔に配置する(最初と最後のflexアイテムは上下にくっつく)

space-around

flexアイテムを等間隔に配置する(全flexアイテムの上下に均等のマージンが開く)

.container {
  display: flex;
  &--strech {
    align-content: stretch; //余白が生まれないように伸ばす
  }
  &--start {
    align-content: flex-start; //上揃え
  }
  &--end {
    align-content: flex-end; //下揃え
  }
  &--center {
    align-content: center; //上下中央揃え
  }
  &--between {
    align-content: space-between; //等間隔配置
  }
  &--around {
    align-content: space-around; //等間隔配置
  }
}

flexアイテム

display: flexの子要素はflexアイテムとなり、下記のプロパティでレイアウトを調整できる。

order

初期値；0

flexアイテムの順番を指定できる。

.container {
  display: flex;

  &__item {
    &:nth-child(1) {
      order: 1;
    }
    &:nth-child(2) {
      order: 1;
    }
  }
}

<div class="container">
  <div class="container__item">こちらが後に表示される</div>
  <div class="container__item">こちらが先に表示される</div>
</div>

flex-grow

初期値：0

flexコンテナの余白を分配する割合を決める。1を指定すると、全て均等の幅になる。
ヌーラボさんのブログで非常にわかりやすく説明されている。

.container {
  display: flex;

  &__item {
    flex-grow: 1;
  }
}

flex-shrink

初期値：1

flexアイテムの合計がflexコンテナの幅が大きい場合に、flexアイテムがどのくらい縮まるかを決める。
0を指定するとオリジナルサイズを維持する。

.container {
  display: flex;

  &__item {
    flex-shrink: 0;
  }
}

flex-basis

初期値：auto

flexアイテムの基準となる幅を指定する。
0%を指定するとflexコンテナ内に収まるように幅が指定される。

flex-growを利用してカラムの幅を2倍…のような利用をするならば、flex-basisを0%にしてflex-growで調整するなどが良いかもしれない。

.container {
  display: flex;

  &__item {
    flex-basis: 0%;

    &:nth-child(2) {
      flex-grow: 2;
    }
  }
}

<div class="container">
  <div class="container__item">カラム1</div>
  <div class="container__item">カラム2</div>
  <div class="container__item">カラム3</div>
</div>

ショートハンド flex

flex-grow, flex-shrink, flex-basisをショートハンドで指定する場合、flexプロパティを利用する。

.container {
  display: flex;

  &__item {
    flex: 1 1 0%; //flex-growd, flex-shrink, flex-basisの順

    &:nth-child(2) {
      flex: 2 1 0%;
    }
  }
}

使用例

dt dd の横並びなんかはfloatを利用していたけど、flexboxを使うと良いんじゃないか？

See the Pen dt dd横並び by poundhound (@poundhound) on CodePen.