Flex | ウダ2Blog https://uda2.com/blog 大阪でフリーランスとしてWEB制作している管理人が気になった技術をメモったり、作ったツールの紹介などを綴っているブログです。 Thu, 04 Aug 2016 02:01:19 +0000 ja hourly 1 https://wordpress.org/?v=6.9 FlexならCSSだけで順序入れ替え https://uda2.com/blog/flexorder/ https://uda2.com/blog/flexorder/#respond Thu, 04 Aug 2016 02:00:50 +0000 http://uda2.com/blog/?p=2058 基本HTMLで書かれたものは左上から右下に掲載され逆転するのは難しかった。 CSS3のFlex（フレキシブルボックスレイアウト）を使うと簡単に順番が変えられるようになった。 Flexはテーブルレイアウトかあらfloatの

The post FlexならCSSだけで順序入れ替え first appeared on ウダ2Blog.]]> 基本HTMLで書かれたものは左上から右下に掲載され逆転するのは難しかった。
CSS3のFlex（フレキシブルボックスレイアウト）を使うと簡単に順番が変えられるようになった。
Flexはテーブルレイアウトかあらfloatの時代を経て現れた新しいレイアウト方式で古いパソコンやスマホは未対応だったりしますが、IE8-9にも対応させるflexibility.jsも現れ期待がもてます。

本題の順序を変更するCSSですが、今回はPC版だとHTMLの順番で表示されるが、スマホだと3番目の項目が一番上に移動するようなサンプルを作成した。
Flex順序サンプル

簡単に解説すると、まず親要素（flexコンテナ）に
display: flex;
と入れフレキシブルボックスレイアウト化し、合わせて表示方向を上から下になるように指定し下記も入れて置く
flex-direction: column;
スマホの場合は特定の子要素（Flexアイテム）に
order: -1;
と記述し最初に持ってきている。

The post FlexならCSSだけで順序入れ替え first appeared on ウダ2Blog.]]> https://uda2.com/blog/flexorder/feed/ 0