2カラムや3カラムのレイアウトをする際にflaotプロパティを使ったりしますが、flaotプロパティは元々、段組みをするために使用するものではないので、たまに不便なことも生じたりします。そこで、代わりにflexというものを使うことで、簡単にカラムレイアウトを実装することができます。

floatとflexの違い

少しだけfloatとflexの違いについて見ていきます。

内容floatflex
親要素の高さ子要素の高さが無視される子要素の高さを含む
後ろに続く要素への影響floatをクリアしなければ要素に影響する影響はされない
子要素の高さが違う場合floatだけでは各要素の高さを揃えることはできない1番高い要素に合わせて高さが揃う
要素の並び順柔軟にはできない自由に変更できる

このように、floatにはいろいろな制限などが発生したりします。もちろん対処法はあるのでfloatでも十分、カラムレイアウトはできます。

それでは、flexを使用したカラムレイアウトを見ていきましょう。

flexの使い方

flexを使ったカラムレイアウトをするのは簡単です。段組みにしたいボックスの親ボックスに対して、flexを指定するだけで2カラムや3カラムといったレイアウトができます。

//HTML
<div class="box">
  <div class="column1">
  コンテンツ内容1
  </div>
  <div class="column2">
  コンテンツ内容2
  </div>
  <div class="column3">
  コンテンツ内容3
  </div>
</div>

//CSS
.box {
  display: flex;
}

このようにすると、高さの揃った3つのボックスが横並びで配置されます。

均等に並べる

上記のような指定だけでは、各ボックスの横幅は揃いません。横幅も均等に揃えたい場合は以下のようにすると均等に揃えることができます。

.column1,.column2,.column3 {
  flex: 1;
}

このように、各要素に「flex: 1;」と指定することで、横幅を均等に揃えて表示させることができます。

このflexの数値を変えれば、ボックスの横幅の比率を変えることもできます。

.column1,.column3 {
  flex: 1;
}
.column2 {
  flex: 3;
}

配置を変更する

親ボックスにflexを使った場合、デフォルトでは左から右へ順番に配置されていきます。この順序を変更したい場合は、flex-directionプロパティを使ってコントロールします。

.box {
  display: flex;
  flex-direction: row-reverse;
}
値配置方向
row左から右へ水平方向に配置（デフォルト値）
row-reverse右から左へ水平方向に配置
column上から下へ垂直方向に配置
column-reverse下から上へ垂直方向に配置

例えば、スマートフォンなどの小さな画面で横並びで表示すると見ずらいこともありますので、そのようなときにメディアクエリと組み合わせて「column」を使うと、小さい画面では、縦並びで表示するといった感じでレスポンシブにも簡単に対応することができます。

子要素の並び順を変更

子要素の並び順を変更したい場合は、orderプロパティを使ってコントロールすることができます。

.column1 {
  order: 1;
}
.column2 {
  order: 0;
}
.column3 {
  order: 2;
}

数値の小さい方から順に左から右へ並びます。

行揃えを変更

flexを使ったボックスの行揃えを変更するのは、justify-contentプロパティを使います。

.box {
  display: flex;
  justify-content: center;
}
値配置位置
flex-start左側に配置（デフォルト値）
flex-end右側に配置
center中央に配置
space-between最初と最後の要素を端に配置し、残りを等間隔で配置
space-aroundすべてを等間隔で配置

このような感じでflexを使って簡単にフレキシブルなレイアウトを作ることができます。機会があれば試しに使ってみてください。

おすすめの記事