問題 × 解決策

flexboxの「order」でスマートフォン時に要素の順番を変える

問題

スマートフォン時に要素の順番を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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eighteen − 4 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧