Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

CSSのflexboxを使い、要素の並び順を変更してみる

こんにちは。突然ですが、flexboxってご存知ですか?その名の通り、幅を変幻自在に調整できるとてもフレキシブルなボックスで、cssのdisplayのプロパティの1つです。
しかし、flexboxは幅だけではなく、並び順も変えれたりするんですよ。
今回はその並び順に着目したデモを作ってみました。
display:flexに指定された、子要素にorderのプロパティを追加していくだけです。
一番目に表示したければ、order:1となります。

デモ

今回はそのflexboxの表示順を変えられる機能を利用してちょっとした、グリッドシステムを作ってみました。
グリッド幅で表示順と、画面に対する幅が変わります。
画面を縮めてみてください

<div class="cs_row">
    <div id="a" class="cs_col-xs-12 cs_col-sm-3 cs_col-sm-order-1 cs_col-xs-order-2">
    	縮めると2番目に来ます
    </div>
    <div id="b" class="cs_col-xs-12 cs_col-sm-3 cs_col-sm-order-2 cs_col-xs-order-1">
    	縮めると1番目に来ます
    </div>
    <div id="c" class="cs_col-xs-12 cs_col-sm-3 cs_col-sm-order-3 cs_col-xs-order-4">
    	縮めると4番目に来ます
    </div>
    <div id="d" class="cs_col-xs-12 cs_col-sm-3 cs_col-sm-order-4 cs_col-xs-order-3">
    	縮めると3番目に来ます
    </div>
</div>
縮めると2番目に来ます
縮めると1番目に来ます
縮めると4番目に来ます
縮めると3番目に来ます

ソースコード

1200px、962px、768pxごとにブレイクポイントを設けています。

長くてすみません。
グリッドシステムの作り方は、bootstrapを参考にしました。

.cs_row{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	-webkit-flex-direction:row;
	-moz-flex-direction:row;
	-ms-flex-direction:row;
	-o-flex-direction:row;
	flex-direction:row;

	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;

	
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;
}
/*スマートフォンサイズ*/
.cs_col-xs-12 {
  width: 100%;
}
.cs_ol-xs-11 {
  width: 91.66666667%;
}
.cs_col-xs-10 {
  width: 83.33333333%;
}
.cs_col-xs-9 {
  width: 75%;
}
.cs_col-xs-8 {
  width: 66.66666667%;
}
.cs_col-xs-7 {
  width: 58.33333333%;
}
.cs_col-xs-6 {
  width: 50%;
}
.cs_col-xs-5 {
  width: 41.66666667%;
}
.cs_col-xs-4 {
  width: 33.33333333%;
}
.cs_col-xs-3 {
  width: 25%;
}
.cs_col-xs-2 {
  width: 16.66666667%;
}
.cs_col-xs-1 {
  width: 8.33333333%;
}
.cs_col-xs-order-1{
	order:1;
}
.cs_col-xs-order-2{
	order:2;
}
.cs_col-xs-order-3{
	order:3;
}
.cs_col-xs-order-4{
	order:4;
}
.cs_col-xs-order-5{
	order:5;
}
.cs_col-xs-order-6{
	order:6;
}
.cs_col-xs-order-7{
	order:7;
}
.cs_col-xs-order-8{
	order:8;
}
.cs_col-xs-order-9{
	order:9;
}
.cs_col-xs-order-10{
	order:10;
}
.cs_col-xs-order-11{
	order:11;
}
.cs_col-xs-order-12{
	order:12;
}

@media (min-width: 768px) {
	.cs_col-sm-12 {
	  width: 100%;
	}
	.cs_col-sm-11 {
	  width: 91.66666667%;
	}
	.cs_col-sm-10 {
	  width: 83.33333333%;
	}
	.cs_col-sm-9 {
	  width: 75%;
	}
	.cs_col-sm-8 {
	  width: 66.66666667%;
	}
	.cs_col-sm-7 {
	  width: 58.33333333%;
	}
	.cs_col-sm-6 {
	  width: 50%;
	}
	.cs_col-sm-5 {
	  width: 41.66666667%;
	}
	.cs_col-sm-4 {
	  width: 33.33333333%;
	}
	.cs_col-sm-3 {
	  width: 25%;
	}
	.cs_col-sm-2 {
	  width: 16.66666667%;
	}
	.cs_col-sm-1 {
	  width: 8.33333333%;
	}
	.cs_col-sm-order-1{
		order:1;
	}
	.cs_col-sm-order-2{
		order:2;
	}
	.cs_col-sm-order-3{
		order:3;
	}
	.cs_col-sm-order-4{
		order:4;
	}
	.cs_col-sm-order-5{
		order:5;
	}
	.cs_col-sm-order-6{
		order:6;
	}
	.cs_col-sm-order-7{
		order:7;
	}
	.cs_col-sm-order-8{
		order:8;
	}
	.cs_col-sm-order-9{
		order:9;
	}
	.cs_col-sm-order-10{
		order:10;
	}
	.cs_col-sm-order-11{
		order:11;
	}
	.cs_col-sm-order-12{
		order:12;
	}
}

@media (min-width: 992px) {
	.cs_col-md-12 {
	  width: 100%;
	}
	.cs_col-md-11 {
	  width: 91.66666667%;
	}
	.cs_col-md-10 {
	  width: 83.33333333%;
	}
	.cs_col-md-9 {
	  width: 75%;
	}
	.cs_col-md-8 {
	  width: 66.66666667%;
	}
	.cs_col-md-7 {
	  width: 58.33333333%;
	}
	.cs_col-md-6 {
	  width: 50%;
	}
	.cs_col-md-5 {
	  width: 41.66666667%;
	}
	.cs_col-md-4 {
	  width: 33.33333333%;
	}
	.cs_col-md-3 {
	  width: 25%;
	}
	.cs_col-md-2 {
	  width: 16.66666667%;
	}
	.cs_col-md-1 {
	  width: 8.33333333%;
	}
	.cs_col-md-order-1{
		order:1;
	}
	.cs_col-md-order-2{
		order:2;
	}
	.cs_col-md-order-3{
		order:3;
	}
	.cs_col-md-order-4{
		order:4;
	}
	.cs_col-md-order-5{
		order:5;
	}
	.cs_col-md-order-6{
		order:6;
	}
	.cs_col-md-order-7{
		order:7;
	}
	.cs_col-md-order-8{
		order:8;
	}
	.cs_col-md-order-9{
		order:9;
	}
	.cs_col-md-order-10{
		order:10;
	}
	.cs_col-md-order-11{
		order:11;
	}
	.cs_col-md-order-12{
		order:12;
	}
}

@media (min-width: 1200px) {
	.cs_col-lg-12 {
	  width: 100%;
	}
	.cs_col-lg-11 {
	  width: 91.66666667%;
	}
	.cs_col-lg-10 {
	  width: 83.33333333%;
	}
	.cs_col-lg-9 {
	  width: 75%;
	}
	.cs_col-lg-8 {
	  width: 66.66666667%;
	}
	.cs_col-lg-7 {
	  width: 58.33333333%;
	}
	.cs_col-lg-6 {
	  width: 50%;
	}
	.cs_col-lg-5 {
	  width: 41.66666667%;
	}
	.cs_col-lg-4 {
	  width: 33.33333333%;
	}
	.cs_col-lg-3 {
	  width: 25%;
	}
	.cs_col-lg-2 {
	  width: 16.66666667%;
	}
	.cs_col-lg-1 {
	  width: 8.33333333%;
	}
	.cs_col-lg-order-1{
		order:1;
	}
	.cs_col-lg-order-2{
		order:2;
	}
	.cs_col-lg-order-3{
		order:3;
	}
	.cs_col-lg-order-4{
		order:4;
	}
	.cs_col-lg-order-5{
		order:5;
	}
	.cs_col-lg-order-6{
		order:6;
	}
	.cs_col-lg-order-7{
		order:7;
	}
	.cs_col-lg-order-8{
		order:8;
	}
	.cs_col-lg-order-9{
		order:9;
	}
	.cs_col-lg-order-10{
		order:10;
	}
	.cs_col-lg-order-11{
		order:11;
	}
	.cs_col-lg-order-12{
		order:12;
	}
}

参考になるサイト



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド