HOME > 開発者向けBLOG > Webデザイン >  フレキシブルボックスレイアウト

Technology Note 開発者向けBLOG

Webデザイン

フレキシブルボックスレイアウト

こんにちは、ゼノフィ渡部です。

フレキシブルボックスレイアウトの機能を利用すると、floatプロパティを使用するよりも、簡単に横並びの表示を実現することができます。

今回は横並びと、その横並び状態での要素の揃え位置、並べる方向をご紹介いたします。

まず、フレキシブルボックスにするために「display: box;」を各ボックスに指定します。2行目から8行目は各ボックスの共通プロパティとして「,(コンマ区切)」でまとめています。

「display: box;」を指定することによって中にある要素が横並びになります。

10行目から14行目までは左寄せのプロパティとなっています。「box-pack: start;」で左寄せ（デフォルト）となります。

16行目から20行目までは中央寄せのプロパティとなっています。「box-pack: center;」で中央寄せとなります。

23行目から26行目までは右寄せのプロパティとなっています。「box-pack: end;」で右寄せとなります。

29行目から32行目までは縦並びのプロパティとなっています。「box-orient: vertical;」によって、通常「display: box;」による横並びの表示が縦並びとなります。

左カラムと右カラムには、はっきりと区別が付くように、幅と背景色を指定しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

/* 共通 */
.box_pack_start,
.box_pack_center,
.box_pack_end,
.box_orient_vertical {
  display: box;
  display: -webkit-box;
}
 
/* 左寄せ */
.box_pack_start {
  box-pack: start;
  -webkit-box-pack: start;
}
 
/* 中央寄せ */
.box_pack_center {
  box-pack: center;
  -webkit-box-pack: center;
}
 
/* 右寄せ */
.box_pack_end {
  box-pack: end;
  -webkit-box-pack: end;
}
 
/* 縦並び */
.box_orient_vertical {
  box-orient: vertical;
  -webkit-box-orient: vertical;
}
 
/* 左カラム */
.l_col {
  width: 50px;
  background: #FC6;
}
 
/* 右カラム */
.r_col {
  width: 200px;
  background: #6CF;
}

4つのパターンのソースを記述しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!-- 横並びで通常の左寄せ -->
<div class="box_pack_start">
    <div class="l_col">
        左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム
    </div>
    <div class="r_col">
        右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム
    </div>
</div>
 
<!-- 横並びで中央寄せ -->
<div class="box_pack_center">
    <div class="l_col">
        左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム
    </div>
    <div class="r_col">
        右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム
    </div>
</div>
 
<!-- 横並びで右寄せ -->
<div class="box_pack_end">
    <div class="l_col">
        左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム
    </div>
    <div class="r_col">
        右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム
    </div>
</div>
 
<!-- 縦並び -->
<div class="box_orient_vertical">
    <div class="l_col">
        左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム
    </div>
    <div class="r_col">
        右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム
    </div>
</div>

サンプルを見ると左カラムと右カラムが横並びの状態で、左寄せ（1番目）、中央寄せ(2番目)、右寄せ(3番目)、そして通常の状態である横並びではなく縦並びで表示されている要素(4番目)があると思います。

「display: box;」で横並びした場合、floatプロパティと比較したときに有利な点は、「float」する訳ではないので、クリアフィックスなどで下の要素がfloatされるのを解除する必要がない点、幅を指定せずとも横並びや、左寄せ、中央寄せ、右寄せができる点にあります。

また、横並びではなく縦に並べたい場合でも、「box-orient: vertical;」のプロパティを指定すると、容易に実現できます。

ただ、注意しなければならないのが、現時点ではwebkit系のブラウザ(Safari、Google Chrome)などでしか対応していないので、使用する場合は注意が必要です。また、現時点では「display: -webkit-box;」として、ベンダープレフィックスを使用し、将来ベンダープレフィックスの効果がなくなる場合のことを考え、「display: box;」を並記しておくとよいでしょう。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

/* 共通 */
.box_pack_start,
.box_pack_center,
.box_pack_end,
.box_orient_vertical {
  display: box;
  display: -webkit-box;
}
 
/* 左寄せ */
.box_pack_start {
  box-pack: start;
  -webkit-box-pack: start;
}
 
/* 中央寄せ */
.box_pack_center {
  box-pack: center;
  -webkit-box-pack: center;
}
 
/* 右寄せ */
.box_pack_end {
  box-pack: end;
  -webkit-box-pack: end;
}
 
/* 縦並び */
.box_orient_vertical {
  box-orient: vertical;
  -webkit-box-orient: vertical;
}
 
/* 左カラム */
.l_col {
  width: 50px;
  background: #FC6;
}
 
/* 右カラム */
.r_col {
  width: 200px;
  background: #6CF;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!-- 横並びで通常の左寄せ -->
<div class="box_pack_start">
    <div class="l_col">
        左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム
    </div>
    <div class="r_col">
        右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム
    </div>
</div>
 
<!-- 横並びで中央寄せ -->
<div class="box_pack_center">
    <div class="l_col">
        左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム
    </div>
    <div class="r_col">
        右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム
    </div>
</div>
 
<!-- 横並びで右寄せ -->
<div class="box_pack_end">
    <div class="l_col">
        左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム
    </div>
    <div class="r_col">
        右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム
    </div>
</div>
 
<!-- 縦並び -->
<div class="box_orient_vertical">
    <div class="l_col">
        左カラム左カラム左カラム左カラム左カラム左カラム左カラム左カラム
    </div>
    <div class="r_col">
        右カラム右カラム右カラム右カラム右カラム右カラム右カラム右カラム
    </div>
</div>

<

>

PAGETOP