FlexBoxで固定幅+可変幅のレイアウト - HTML・CSSテックラボ - [SMART]

CSSのFlexBoxを使って1カラムを固定幅、もう1カラムをリキッド（可変幅）にし、ウインドウサイズが一定のサイズ以下になると、固定幅のカラムを下に落とし、両カラムとも横幅100%にする方法を紹介します。 デモ HTMLは以下の通りです。 ※レイアウトに必要な部分のみの抜粋です。 <main> <div class="entry"> entry </div> <div class="sub"> sub </div> </main> SCSSは以下の通りです。 @import "bourbon"; // Bourbonの読み込み // レスポンシブ用横幅指定 $w-entry: 600px; $w-sub: 300px; $w-margin: 10px; // 簡易なCSSリセット *, *:before, *:after { box-sizing: border-box; margin: