#column1

このカラムの横幅は100%です。可変幅です。

このテンプレートでやっていること

縦の親要素#wrapper
display:flex、flex-direction:column、headerとfooterには高さ固定でheightを指定、#containerにflex:autoを指定して縦方向の可変を実現します。
横方向の親要素#column-wrap
display:flexを設定してFlexboxでレイアウトしています。
子要素#column1と#column2と#column3
flex:○○を設定して横幅に関する設定をしています。
order:○○を設定して表示される順番を決めています。

PC向けレイアウトで#column1と#column2と#column3の横幅を変更したい場合

このテンプレートでは#column1の横幅が可変幅で#column2と#column3の横幅は固定幅です。親要素#column-wrapの横幅から#column2と#column3の横幅を引いた値が#column1の横幅になります。

なので親要素#column-wrapの横幅が1200pxの場合、子要素#column2と#column3の横幅を300pxにしたら#column1の横幅は600pxになります。

#column2

このカラムの横幅は100%300pxです。

#column3

このカラムの横幅は100%300pxです。

サンプルのコードでは↓ここからfooterまでのコンテンツは表示されません。

広告が表示されないサンプルはこちら


サンプルのコードでは↑ここまで表示されません。