合同会社ひめぽーと は、愛媛の店舗、生産者様のホームページ作成・制作・管理、ネットショップ作成・制作・管理、パソコン関連サポートなど、バックアップ致します。

pure.cssは、flexを使って自由なレイアウトのレスポンシブ対応にする。

掲載日: / 更新日:
pure.cssは、flexを使って自由なレイアウトのレスポンシブ対応にする。

pure.cssでレスポンシブ対応するなら、flexを使いましょう。

pure.cssで素直にレスポンシブ対応Gridだけで構築すると

 

ABC

 

A
B
C

こんな感じにHTMLに記述された順番にしか並びません。

例えば、BCAの順番に縦に並ぶようにしたい場合、どうしたらよいでしょうか?

pure.cssでpure-gで括るとbox/flexbox/flexの定義がされているので簡単!

以下のような感じで、それぞれのボックスにオーダー番号を付けてあげるだけで、簡単に並び替えが出来ちゃいます。

-webkit-box-ordinal-group:2;
-ms-flex-order:2; 
-webkit-order:2; 
order:2;

で、これを画面サイズごとにCSSに定義していくと画面サイズごとに違った順番で表示の変更も可能となります。

ABC

A:1、B:2、C:3

BC
A

A:3、B:1、C:2

B
A
C

A:2、B:1、C:3

こんな感じにも簡単にできます。

弊社作成中のテーマ「pureframe」では、以下のように使っています。分かってしまえば、簡単ですね。

@media screenでの定義順番は注意が必要で、CSSの基本ルールで最後の定義が有効になりますので適用範囲の「デフォルト、広いー>狭い」とします。

/*レスポンシブデザイン 表示順番 */
.container-inner > .main-left ,
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-l ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
@media screen and (min-width: 35.5em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .side-l {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
}
@media screen and (min-width: 48em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .side-l {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
}
@media screen and (min-width: 64em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .side-lr ,
.container-inner > .side-l {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
}

コメントを残す

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

CAPTCHA