LocalToolsオフラインブラウザツール集

カテゴリー: 開発ツール

CSS Flexboxジェネレーター

サイト側で企画したツールツールが見つからない？

フレックスコンテナを視覚的に組み立ててCSSをコピー

flex-direction・flex-wrap・justify-content・align-items・gapを、実際のフレックスアイテムで構成されたライブプレビュー上で設定し、完成したコンテナ宣言をコピーできます。ここでの操作はすべてブラウザ内で完結します。

出力
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。

このツールでできること

Flexboxには互いに影響し合う5つのプロパティがあり、方向を変えるだけで「主軸」の意味自体が変わるため、wrapやjustify-contentの挙動も変わります。だからこそ、頭の中で想像するより実際に見たほうが早いのです。このツールは番号付きのアイテムを入れた実際のフレックスコンテナを画面に保ち、仕様の理解ではなく、ボックスが実際にどう動くかを基準にすべてのオプションを判断できるようにします。

使い方

  1. flex-direction と flex-wrap を設定します。
  2. justify-content と align-items を選び、間隔とアイテム数を調整します。
  3. 完成した .container ルールをスタイルシートにコピーします。

プライバシー

このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。

よくある質問

プレビューは実際のフレックスレイアウトですか。
はい。番号付きのボックスは、設定中のCSSそのままでレイアウトされており、画像ではありません。表示されているものが、コピーしたルールが生み出す結果そのものです。
flex-direction を変えると justify-content の動きも変わるのはなぜですか。
justify-content は常に主軸に沿って働き、その主軸が横方向か縦方向かを決めるのが flex-direction です。columnに切り替えると、「揃える」の意味が左右から上下に変わります。
レイアウトの情報がアップロードされることはありますか。
いいえ。CSSは設定した項目からページ内で組み立てられるテキストであり、プレビューもローカルで描画されます。

すべてのツールに戻る