CSS flexを使った4ボックスの配置方法いろいろ

HTMLには、①～④の4個のp要素が数字の小さい順に並んでいるボックス群が記述されています。CSS3のflexを使えば、これらのボックスの表示順を自由に指定できます。 詳しくは、解説記事をご覧下さい。

下記には、5種類の表示例が計10個表示されています。そのすべてで、HTMLソースは「①→②→③→④」の順番で記述されている点に注目して下さい。 なお、このサンプルを意図通りに表示するためには、Edge、IE11以降、Firefox28以降、Chrome29以降(※21以降)、Safari9以降(※6.1以降)、Opera17以降(※12.1以降)のバージョンが必要です。(ベンダープレフィックスを使えば「※」に示すバージョン以降でも表示可能です。)

▼CSS flex例1：HTMLの記述順のまま配置する記述方法

(縦向き)

(横向き)

▼CSS flex例2：HTMLの記述順とは逆順に配置する記述方法

(縦向き)

(横向き)

▼CSS flex例3：3番目のボックスを先頭に配置する記述方法

(縦向き)

(横向き)

▼CSS flex例4：2番目のボックスを末尾に配置する記述方法

(縦向き)

(横向き)

▼CSS flex例5：表示順を1つ1つすべて指定して配置する記述方法

(縦向き)

(横向き)

解説記事に戻る