CSSで段組レイアウト：可変幅＋可変幅

基本形

先ず2つのboxを用意し、両boxをdivで囲みます。

<div class="wrap">
  <div class="boxA">
    <p>boxA</p>
    <p>A A A・・・A</p>
  </div>
  <div class="boxB">
    <p>boxB</p>
    <p>B B B・・・B</p>
  </div>
</div>

#boxA {
  border: 10px solid pink;
}

#boxB {
  border: 10px solid lightblue;
}

Flexboxで2段組み

ウィンドウ幅や画面幅が広がった場合に横並びになるようにします。

CSS変更

@media screen and (min-width:641px){
  #wrap	{
    display: flex;
  }

  #boxA {
    box-sizing: border-box;
    width: 30%;
  }

  #boxB {
    box-sizing: border-box;
    width: 70%;
  }
}

1

ブレイクポイント（縦並びと横並びの境目）で、641px以上で横並びにしています。

3

Flexboxで子要素を横並びにします。

7,12

widthがborderの太さ込みでの幅指定になります。borderがない場合は不要です。

8,13

共に幅を%指定します。合計100%にします。

結果

PCでのウィンドウの横幅や、スマートフォンなどの画面幅によって、各boxの幅が率に応じて伸縮しました。

実際の様子（デモ）

実際に、PCでウィンドウ幅を変えたり、スマートフォンなどで縦横を変えてみてください。

最大幅と最小幅を指定した応用

上記のboxAにmax-widthとmin-widthを追加します。

CSS変更

  #boxA	{
    box-sizing: border-box;
    width: 30%;
    max-width: 200px;
    min-width: 150px;
  }

結果

するとboxAは

• 200pxより広がらなく
• 150pxより狭まらなく

なりました。

実際の様子（デモ）

背景の縦線の間隔は100pxです。

%指定＋%指定のまとめ

比較的わかりやすい横並びの分割方法です。

サイドバーに固定幅の要素を置く場合、広げた際に余白ができたり、狭めた場合に横スクロールバーが出る場合がありますが、max-widthとmin-widthを用いることでそれらの回避や軽減ができます。