flexを使ったレイアウト

カラム1のボックスカラム1のボックス

カラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックス

カラム3のボックスカラム3のボックスカラム3のボックスカラム3のボックスカラム3のボックスカラム3のボックス

横幅を均等にしたレイアウト

カラム1のボックスカラム1のボックス

カラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックス

カラム3のボックスカラム3のボックスカラム3のボックスカラム3のボックスカラム3のボックスカラム3のボックス

横幅の比率を変えたレイアウト

カラム1のボックスカラム1のボックス

カラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックス

カラム3のボックスカラム3のボックスカラム3のボックスカラム3のボックスカラム3のボックスカラム3のボックス

小さい画面では縦並びにレイアウト

カラム1のボックスカラム1のボックス

カラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックスカラム2のボックス

カラム3のボックスカラム3のボックスカラム3のボックスカラム3のボックスカラム3のボックスカラム3のボックス