2020.08.12
CSS｜Flexboxなら横並びのレイアウトも簡単
Flexboxは横並びのレイアウトを組むときに便利です。横並びにする場合、floatやinline-blocktable-cellを使用する方法もありますが、Flexboxならもっと簡単にレイアウトができます。
flexbox
flexを使用するときは親要素に「display:flex」
下記のような構造の場合、<div>(親要素)にdisplay:flexを指定すれば、<ｐ>(子要素)が横並びしてくれます。
<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-grow、flex-shrink、flex-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
