STUDIOで横並びのBOXを綺麗に揃えるTIPS

STUDIOでのBoxを横並びにすることはよくあると思います。一方でBox毎にコンテンツボリュームが異なると綺麗にレイアウトされずにお困りになることはないでしょうか(↓のような感じで)。

今回の例のように横並びの子Boxに色がついている場合やボタンがある場合、きっちり揃っていないととても見栄えが悪いです。簡単な対策として親や子の縦幅をAutoではなく絶対値(600pxとか)にすると簡単に綺麗に揃います。しかしそれではブラウザサイズによってはレイアウトが大きく崩れてしまうことがあるので、望ましい方法ではありません。

ではどうやってこの3つの子Boxを綺麗にレイアウトするのかをご説明します。

▼ 目次

1. 子BOXの高さを揃える

まず子Boxの高さを揃えます。親のBoxをクリックし、両端揃えを選択します。

そうすると子Boxは全て一番高さのあるBoxに統一されます。
※子BOXの縦幅はAutoにしておく必要があります。

2. 子Box内のレイアウトを整える

次に子Box内のレイアウトを整えていきます。方針としては以下の通りです。

1. 見出しは3つのBox全て同じ位置で揃えたい

2. MOREのボタンも同じ位置で揃えたい

3. 見出しと本文のマージンは揃えたい

4. 本文とMOREのボタンのマージンは文字量で可変にしたい

例えば子Boxの整列を両端均等揃えにすると、見出しとボタンの位置は綺麗に揃いますが、「見出し」「本文」「ボタン」の各要素が均等に配置されてしまいます。この場合本文の上端が揃っておらず見栄えがよろしくないです。

FLEXボックスでボタン位置を揃える

4の「本文とMOREのボタンのマージンは文字量で可変にしたい」を実現するために、コンテンツボリュームが少ない2つの子Boxには本文の下に空のBoxを一つ作ります。この時縦幅を1flexで挿入します(横幅は100%にしておくのが無難です)。

そうすると以下のように、本文が少ない2つの子Boxの足りないスペースを埋めてくれます。

今分かりやすく色をつけている赤いBoxを透明にすると、以下のように綺麗に揃った状態になります。

ポイントのまとめ

1. 親Boxを両端揃えにする

2. 子Boxは縦幅flexの空Boxで調整

3. ボタン位置はFlexボックスを挿入することで調整

という感じでしょうか。参考になれば幸いです。