レイアウトにとても便利なFlexboxですが、必要なベンダープレフィックスがよくわからなかったり、都度都度記述するのが面倒だったりします。
IEのサポートが終了した2023年に必要なベンダープレフィックスを、ワンクリックでコピーできるようにまとめましたので、是非ご活用ください。
「Can I Use.」を基に、主要ブラウザの直近2バージョンに必要なベンダープレフィックスを記述しております。
簡易一覧表
各プロパティの一覧表です。
「コードをコピー」をクリックすると、ベンダープレフィックス付きのCSSがクリップボードにコピーされます。
Flex container
| プロパティ | 備考 | 値 | コード |
|---|---|---|---|
| display | アイテムを横並びにする設定 | flex |
コピーしました
|
| flex-direction | アイテムの並びを縦か横か配置方法の設定 | row |
コピーしました
|
| row-reverse |
コピーしました
|
||
| column |
コピーしました
|
||
| column-reverse |
コピーしました
|
||
| flex-wrap | アイテムの折り返し方法の指定 | nowrap |
コピーしました
|
| wrap |
コピーしました
|
||
| wrap-reverse |
コピーしました
|
||
| flex-flow | アイテムの配置方向と折り返し方法をまとめて指定 | row |
コピーしました
|
| nowrap |
コピーしました
|
||
| justify-content | アイテムの横並びの位置を指定 | flex-start |
コピーしました
|
| flex-end |
コピーしました
|
||
| center |
コピーしました
|
||
| space-between |
コピーしました
|
||
| space-around |
コピーしました
|
||
| align-items | アイテムの縦並びの位置を指定 | flex-start |
コピーしました
|
| flex-end |
コピーしました
|
||
| center |
コピーしました
|
||
| baseline |
コピーしました
|
||
| stretch |
コピーしました
|
||
| align-content | アイテムの縦並びの位置を指定（複数行） | flex-start |
コピーしました
|
| flex-end |
コピーしました
|
||
| center |
コピーしました
|
||
| space-between |
コピーしました
|
||
| space-around |
コピーしました
|
||
| stretch |
コピーしました
|
Flex item
| プロパティ | 備考 | 値 | コード |
|---|---|---|---|
| order | アイテムの並び順を指定 | 正の値、負の値、0 |
コピーしました
|
| flex-grow | アイテムの伸長率 | 正の値、0 |
コピーしました
|
| flex-shrink | アイテムの縮小率 | 正の値、0 |
コピーしました
|
| flex-basis | アイテムの基準幅を設定 | 正の値、auto |
コピーしました
|
| flex | flex-grow、flex-shrink、flex-basisをまとめて指定 | 上記に準ずる |
コピーしました
|
ソースコード
ソースコードを詳しく見たい方はこちらをご覧ください。
「コードをコピー」をクリックすると、クリップボードにコピーされます。
Flex container
display: flex;
display: -webkit-box;
display: flex;コピーしました
flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;コピーしました
flex-direction: row-reverse;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
flex-direction: row-reverse;コピーしました
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;コピーしました
flex-direction: column-reverse;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
flex-direction: column-reverse;コピーしました
flex-wrap: nowrap;
flex-wrap: nowrap;コピーしました
flex-wrap: wrap;
flex-wrap: wrap;コピーしました
flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;コピーしました
flex-flow: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-flow: row;コピーしました
flex-flow: nowrap;
flex-flow: nowrap;コピーしました
justify-content: flex-start;
-webkit-box-pack: start;
justify-content: flex-start;コピーしました
justify-content: flex-end;
-webkit-box-pack: end;
justify-content: flex-end;コピーしました
justify-content: center;
-webkit-box-pack: center;
justify-content: center;コピーしました
justify-content: space-between;
-webkit-box-pack: justify;
justify-content: space-between;コピーしました
justify-content: space-around;
justify-content: space-around;コピーしました
align-items: flex-start;
-webkit-box-align: start;
align-items: flex-start;コピーしました
align-items: flex-end;
-webkit-box-align: end;
align-items: flex-end;コピーしました
align-items: center;
-webkit-box-align: center;
align-items: center;コピーしました
align-items: baseline;
-webkit-box-align: baseline;
align-items: baseline;コピーしました
align-items: stretch;
-webkit-box-align: stretch;
align-items: stretch;コピーしました
align-content: flex-start;
align-content: flex-start;コピーしました
align-content: flex-end;
align-content: flex-end;コピーしました
align-content: center;
align-content: center;コピーしました
align-content: space-between;
align-content: space-between;コピーしました
align-content: space-around;
align-content: space-around;コピーしました
align-content: stretch;
align-content: stretch;コピーしました
Flex item
order
-webkit-box-ordinal-group: 1;
order: 0;コピーしました
flex-grow
-webkit-box-flex: 0;
flex-grow: 0;コピーしました
flex-shrink
flex-shrink: 0;コピーしました
flex-basis
flex-basis: 0;コピーしました
flex
-webkit-box-flex: 1;
flex: 1 0 auto;コピーしました
まとめ
Flexboxを利用するにあたって必要なベンダープレフィックスをまとめました。
是非活用して、Flexboxをどんどん使っていきましょう！
