問題
スマートフォン時に要素の順番をcssだけで変えるには？
解決策
flexboxの「order」で要素の順番を操作する。
PCとスマートフォンで順番をcssだけで変えたい
PCとスマートフォンで順番を変えたい、けれどHTMLはそのままにしたい＋そのためだけにjavascriptは使いたくない…。
そんな時のために、flexboxの「order」でスマートフォン時に要素の順番を変える方法をご紹介します。
今回は以下の記事の応用になります。
汎用性がとても高い！「flexbox」の使用方法のご紹介
flexboxの「order」
flexboxの「order」を設定することで、個々の要素の順番を自由に操作することができます。
DEMOはこちら
スマートフォン時、テキスト1とテキスト2の順番が入れ替わります。
テキスト1
テキスト2
HTML
<div class="flexorder-box">
<p class="text01">テキスト1</p>
<p class="text02">テキスト2</p>
<p class="image">
<img src="..." alt="">
</p>
</div>CSS
@media only screen and (max-width: 767px) {
.flexorder-box{
display: -webkit-flex;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.flexorder-box .text01{
-ms-flex-order:1;
-webkit-order:1;
order:1;
}
.flexorder-box .text02{
-ms-flex-order:0;
-webkit-order:0;
order:0;
}
.flexorder-box .image{
-ms-flex-order:2;
-webkit-order:2;
order:2;
}
}ポイント!
「order:移動したい順番の番号」を設定することで、flexboxを設定した親要素内での好きな順番に移動することができます。
特定の要素だけ移動させる
flexboxの「order」で、画像だけをスマートフォン時、先頭に移動します。
DEMOはこちら
スマートフォン時、画像が先頭に移動します。
テキスト1
テキスト2
HTML
<div class="flexorder-box imagesptop">
<p class="text01">テキスト1</p>
<p class="text02">テキスト2</p>
<p class="image">
<img src="..." alt="">
</p>
</div>CSS
@media only screen and (max-width: 767px) {
.flexorder-box{
display: -webkit-flex;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.flexorder-box.imagesptop .image{
-ms-flex-order:-1;
-webkit-order:-1;
order:-1;
}
}ポイント!
「order:-1」を設定することで、flexboxを設定した親要素内での先頭に移動することができます。
参照
以下のサイトが詳しく解説してくれています。
【フレックスアイテムの並べ替え – CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
【要素の順番を入れ替えられるflexboxのorderを活用しよう htmlとcss3-ホームページ制作のアテンド｜新潟・長岡｜SEO対策・WEBデザイン】
https://www.attend.jp/html_171101
コメント