orderで順番を変える

今回は３カラムのレイアウトについて、orderを使い、順番を変えます。まずは完成形から。スマホは１カラムになります。

スマホでは中央を先頭に、次いで、左、右となります。HTMLは以下になります。

HTML

<div class="t-box">



<div class="t-box__left">

<p>左</p>

</div>



<div class="t-box__center">

<p>中央</p>

</div>



<div class="t-box__right">

<p>右</p>

</div>

</div>

SCSSは以下になります。

SCSS

.t-box{
display: flex;
flex-direction: column;

&__left{
background: red;
order: 2;
}

&__center{
background: aqua;
order: 1;
}

&__right{
background: green;
order: 3;
}
}

flexにして、flex-direction: columnで縦並びにします。orderを使い、順番を決めます。

CSSは以下になります。

CSS

.t-box {
  display: flex;
  flex-direction: column;
}
.t-box__left {
  background: red;
  order: 2;
}
.t-box__center {
  background: aqua;
  order: 1;
}
.t-box__right {
  background: green;
  order: 3;
}

768px以上になると

画面幅が768px以上になると、横一列にします。HTMLは同じで、メディアクエリで振り分けます。768px以上の画面サイズで表示している場合は、横一列になります。

先ほどのHTMLと同じです。

メディアクエリで対応する

768pxになると、横並びにしたいので、メディアクエリで対応します。

メディアクエリ(SCSS)

@media (min-width: 768px) {

.t-box{
flex-direction: row;
&__left,
&__center,
&__right{
width: 33%;
order: 0;
}
}
}

メディアクエリ(CSS)

@media (min-width: 768px) {
  .t-box {
    flex-direction: row;
  }
  .t-box__left, .t-box__center, .t-box__right {
    width: 33%;
    order: 0;
  }
}

flex-direction: rowで、横並びにします。そのあと、order:0で順番をリセットします。max-widthで数値を決めると、綺麗に横並びします。経験上、合計が100％を超えなければ、カラム落ちしません。意図的にするのであれば問題ないです。

さいごに

割と複雑ですが、たとえば、スマホだと記事を先頭に、そして、PCでは記事を真ん中に持っていきたい。そのときは、orderが有効です。

興味のある人は、お試しあれ。バックアップを取ってから対応しましょう。