使い方を教えてください。

画面の入力欄に処理したい値を入れるだけで、Flexboxガイドが即座に結果を表示します。コピーボタンで結果をワンクリックでクリップボードに送れます。

料金はかかりますか？

Flexboxガイドは完全無料です。登録やログイン、課金、アプリのインストールは不要で、ブラウザがあればすぐに利用できます。

デザイン・CSS無料登録不要

Flexboxガイド

CSS Flexboxの主要プロパティと値の早見表。レイアウト設計の参考に便利な無料オンラインツール。

入力

結果

--- 親要素 (container) ---
display: flex;
flex-direction: row | row-reverse | column | column-reverse
justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly
align-items: flex-start | center | flex-end | stretch | baseline
flex-wrap: nowrap | wrap | wrap-reverse
gap: 1rem;

--- 子要素 (item) ---
flex: 1;              /* flex-grow:1 flex-shrink:1 flex-basis:0% */
flex-grow: 1;         /* 余白を埋める比率 */
flex-shrink: 0;       /* 縮小しない */
flex-basis: 200px;    /* 基本サイズ */
align-self: center;   /* 個別の垂直配置 */
order: -1;            /* 表示順 */

--- よくあるパターン ---
中央揃え: justify-content:center; align-items:center;
等間隔:   justify-content:space-between;
右寄せ:   margin-left:auto; (子に)
下揃え:   margin-top:auto; (子に)

FAQ

よくある質問

運営維持のため一部ページに広告を表示していますが、ツール本体の動作を妨げない範囲に留めています。ブロッカーを利用されても機能は動作します。

こちらもおすすめ

CSS display一覧

CSSのdisplayプロパティの値と挙動を比較解説する無料オンラインツール。

CSS Gridガイド

CSS Gridの主要プロパティと値の早見表。2次元レイアウト設計に便利な無料オンラインツール。

CSS position解説

CSSのpositionプロパティ(static/relative/absolute/fixed/sticky)の違いと使い方を解説する無料オンラインツール。

CSS単位ガイド

CSSの長さ単位(px/em/rem/vw/vh/ch等)の違いと使い分けを解説する無料オンラインツール。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...