2カラムのページレイアウト
メインとサイドバー左右の変更
order:1で左へorder:2は右側になります。
flex: 1 1 auto; はフレキシブル
flex: 0 0 230px; は230px幅で固定
CSS
@media only screen and (min-width: 768px) {
.parent {
flex-flow: row;
}
main {
flex: 1 1 auto;
order: 2;
}
.side {
flex: 0 0 230px;
order: 1;
}
ナビゲーションのアレンジ
display: flex !important の下へ追加（ついか）する
justify-content: 〇〇〇
- 右よせ／flex-end
- 中央／center
- 均等配置／space-around もしくは space-between
CSS
@media only screen and (min-width: 768px) {
/* ナビゲーション */
.hamburger {
display: none;
}
.navbar {
display: flex !important;
justify-content:space-around;
}
}
１つだけ左寄せにする場合は
１つだけ左寄せ／justify-content: 〇〇〇はDelete
.navbar li:first-child {margin-right:auto;} を追加する
CSS
@media only screen and (min-width: 768px) {
/* ナビゲーション */
.hamburger {
display: none;
}
.navbar {
display: flex !important;
}
.navbar li:first-child {
margin-right:auto;
}
}