WEBデザイン

【2023年最新】コピペで楽々!Flexboxのベンダープレフィックスまとめ

レイアウトにとても便利な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をどんどん使っていきましょう!

「Flexbox」の関連記事一覧