多段組の可変レイアウト

%で作るシンプルな2カラム

一番基本の相対単位は「％」となる。％は親要素のcontent-boxサイズを基準（＝100％）とし、自分自身のサイズの割合を算出する。ただし、子要素の％幅の合計が100％を超えるとカラム落ちする場合があるので注意。

.row {
  display: flex;
}
.col2 {
  width: 50%;  /* 親要素のcontent-boxサイズを基準として計算する */
}

指定のpxサイズから%サイズを計算する

[子要素のサイズ]÷[親要素のcontent-boxサイズ]×100％

.row {
  display: flex;
  justify-content: space-between;
  max-width: 640px;
}
.col2 {
  width: calc((300 / 640) * 100%);  /* 各カラム300px・段間40pxの場合、widthは46.875% */
}

親要素にpaddingがついている場合

親要素にpaddingがある場合、子要素の％計算の基準となる領域はpaddingを除いた純粋なコンテンツ領域（=content-box）のサイズを使用する（親要素にborderがついている場合はそのサイズも除外する）。

.row {
  display: flex;
  justify-content: space-between;
  max-width: 640px;  /* paddingを含んだサイズ */
  padding: 20px;  /* 親ボックスに20pxのpaddingが付く */
}
.col2 {
  width:  calc((290 / 600) * 100%);  /* 各カラム290px・段間20pxの場合、widthは48.3333% */
}
inserted by FC2 system