HTML/CSS

2020.08.12

CSS|Flexboxなら横並びのレイアウトも簡単

この記事は1515日前に投稿されたものです。

Flexboxは横並びのレイアウトを組むときに便利です。横並びにする場合、floatinline-blocktable-cellを使用する方法もありますが、Flexboxならもっと簡単にレイアウトができます。

flexbox

flexを使用するときは親要素に「display:flex」

下記のような構造の場合、<div>(親要素)にdisplay:flexを指定すれば、<p>(子要素)が横並びしてくれます。

<div>   <!--親要素-->
 <p>Flex item</p>  <!--子要素-->
 <p>Flex item</p>
 <p>Flex item</p>
</div>

対応ブラウザ

2020年8月現在では、最新バージョンのブラウザならFlexboxに対応しています。少し古いブラウザでは、ベンダープレフィックスが必要になる場合があります。

要ベンダープレフィックス(-webkit-)
Safari6〜8 / Chrome 21〜28 / Opera 15〜16 / Android 2.1〜4.3 / iOS Safari 7〜8.4 / IE10(-ms-)

フレックスボックス(display:flex)のプロパティ

並べる方向(横、縦)「flex-direction」

flex-direction : row(デフォルト)

左から右へ

1

2

3

flex-direction : row-reverse

右から左へ

1

2

3

flex-direction : column

上から下へ

1

2

3

flex-direction : column-reverse

下から上へ

1

2

3

折り返し「flex-wrap」

flex-wrap : nowrap(デフォルト)

折り返しなし

1

2

3

4

5

6

flex-wrap : wrap

上の行から折り返して下の行へ

1

2

3

4

5

6

flex-wrap : wrap-reverse

下の行から折り返して上の行へ

1

2

3

4

5

6

横揃えの配置「justify-content」

justify-content : flex-start(デフォルト)

左揃え

1

2

3

justify-content : flex-end

右揃え

1

2

3

justify-content : center

中央揃え

1

2

3

justify-content : space-between

自動で間隔をあける

1

2

3

justify-content : space-around

両端も含めて自動で間隔をあける

1

2

3

縦揃えの配置「align-items」

align-items : stretch(デフォルト)

親の高さに合わせて伸ばす

1

2

3

align-items : flex-start

上に揃える

1

2

3

align-items : flex-end

下に揃える

1

2

3

align-items : center

縦の中央に揃える

1

2

3

align-items : baseline

ベースラインに揃える

1

2

3

複数行のときの縦の配置「align-content」

align-content: stretch(デフォルト)

親の高さに合わせて伸ばす

1

2

3

4

5

6

align-content: flex-start

上に揃える

1

2

3

4

5

6

align-content: flex-end

下に揃える

1

2

3

4

5

6

align-content: center

縦の中央に揃える

1

2

3

4

5

6

align-content: space-between

均等な上下の間隔をあける

1

2

3

4

5

6

align-content: space-around

上段と下段も含めて均等な上下の間隔をあける

1

2

3

4

5

6

子要素(アイテム)のプロパティ

並べる順序「order」

order : 順番

並べる順番を変える

1
order:3

2
order:4

3
order:1

4
order:2

親要素の空きがある場合の伸び率「flex-grow」

flex-grow : 伸び率

親要素の余白を埋める比率 ※親要素に余白がない場合は反映されません。

1
flex-grow:3

2
flex-grow:4

3
flex-grow:1

4
flex-grow:2

親要素の空きがない場合の縮み率「flex-shrink」

flex-shrink : 縮み率

親要素に余白なく子要素が収まらない場合の伸び率 ※比率が大きいほど小さくなります。

1
flex-shrink:3

2
flex-shrink:4

3
flex-shrink:1

4
flex-shrink:2

基本の横幅を指定「flex-basis」

flex-basis : 横幅(%,px)

子要素の横幅を指定

1
flex-basis:25%

2
flex-basis:160px

3
flex-basis:40%

4
flex-basis:220px

伸び率、縮み率、横幅をまとめて指定「flex」

flex : 伸び率 縮み率 横幅

一括でflex-growflex-shrinkflex-basisを指定

.flex-item {
  flex: 0 2 25%;
}

子要素の縦位置を指定「align-self」

align-self : auto(デフォルト)

親要素のalign-itemsを継承

align-self : stretch

親要素の高さに伸びる

align-self : flex-start

上に揃える

align-self : flex-end

下に揃える

align-self : center

縦の中央揃え

align-self : baseline

align-selfは、親要素のalign-itemsより優先されます。

auto

stretch

flex-start

flex-end

center

baseline