完璧なフレックスボックスレイアウトを作成

CSS フレックスボックスコードを視覚化、カスタマイズ、生成するには、直感的なドラッグアンドドロップインターフェイスを使用します。

コンテナのプロパティ

display

flex-direction

flex-wrap

justify-content

align-items

align-content

アイテムのプロパティ

Items

3 items

選択したアイテム

flex-grow

flex-shrink

flex-basis

order

align-self

Preview

Item 1

Item 2

Item 3

.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

生成された CSS コード

実例

ナビゲーションバー

Logo

Home

Products

About

Contact

左側にロゴ、中央にメニュー項目、右側にカートアイコンがある一般的なナビゲーションバーレイアウト。

Card Grid

カードタイトル

ここにカードの説明テキスト

カードタイトル

ここにカードの説明テキスト

カードタイトル

ここにカードの説明テキスト

フレックスボックスプロパティを使用してさまざまな画面サイズに適応するレスポンシブカードグリッド。

記事のレイアウト

記事タイトル

投稿日 2023年1月1日 ·5分で読めます

記事の内容はこちら。これは、簡単な要約でも記事の全文でもかまいません。Flexbox は、視覚的に魅力的な方法で画像とテキストを配置するのに役立ちます。

モバイルデバイスで重ねられた、左側に画像、右側にテキストコンテンツがある一般的な記事レイアウト。

ダッシュボードのレイアウト

Header

Sidebar

メインコンテンツ

Footer

ヘッダー、サイドバー、メインコンテンツエリア、フッターを含むダッシュボードレイアウトで、水平方向と垂直方向の両方の配置にフレックスボックスを使用します。

フレックスボックスの基礎

Flexbox とは?

Flexible Box Layout(一般にFlexboxとして知られています)は、コンテナ内のアイテムのサイズが不明または動的である場合でも、コンテナ内のアイテム間でスペースを分散および整列する効率的な方法を提供するCSS3レイアウトモデルです。

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

主要な概念:Flexbox には 2 つの主要な概念が導入されています。フレックスコンテナ and the フレックスアイテム.コンテナは親要素で、アイテムはその直接の子要素です。

主軸 vs 交差軸

フレックスボックスのレイアウトは、次の 2 つの軸に基づいています。main axis and the 交差軸.

主軸:フレックスアイテムがレイアウトされる主軸。によって定義されるflex-direction.
交差軸:主軸に垂直な軸。その方向は主軸の方向によって異なります。

主軸→

← 交差軸

Start

Main

End

コンテナのプロパティ

Property	Description
`display`	フレックスコンテナを定義します。指定された値に応じてインラインまたはブロック。
`flex-direction`	主軸を設定し、フレックスアイテムがフレックスコンテナに配置される方向を定義します。
`flex-wrap`	デフォルトでは、フレックスアイテムはすべて 1 行に収まるようにします。これを変更し、このプロパティを使用して必要に応じてアイテムを折り返すことができます。
`justify-content`	フレックスアイテムをフレックスコンテナの現在の行の主軸に沿って整列させます。
`align-items`	フレックスアイテムをフレックスコンテナの現在の行の交差軸に沿って整列させます。
`align-content`	フレックスコンテナの線を、交差軸に余分なスペースがある場合に整列させます。

アイテムのプロパティ

Property	Description
`order`	デフォルトでは、フレックスアイテムはソース順にレイアウトされます。ただし、`order`プロパティは、Flex コンテナに表示される順序を制御します。
`flex-grow`	フレックスアイテムが必要に応じて拡張する機能を定義します。これは、比率として機能する単位のない値を受け入れます。
`flex-shrink`	フレックスアイテムが必要に応じて縮小する機能を定義します。
`flex-basis`	フレックスアイテムの初期サイズを定義し、利用可能なスペースがフレックス係数に従って分配されます。
`align-self`	デフォルトの配置 (または`align-items`) は、個々のフレックスアイテムに対して上書きされます。

Related Tools

CSS3変換を簡単に生成

コードを書かずに複雑なCSS3変換を作成するための強力で直感的なツール。変更をリアルタイムで視覚化し、生成された CSS をコピーしてプロジェクトで使用します。

完璧なフレックスボックスレイアウトを作成

CSS フレックスボックスコードを視覚化、カスタマイズ、生成するには、直感的なドラッグアンドドロップインターフェイスを使用します。

スタイラスからCSSへのコンバーター

SCSS コードを CSS に変換します。高速、簡単、安全。

CRC-16ハッシュ計算機

CRC-16チェックサムを迅速かつ簡単に生成

TSVをJSONに簡単に変換

TSVデータを構造化されたJSON形式にワンクリックで変換できます。高速、安全、そして完全にブラウザベース。

SHA3-224ハッシュ計算機

SHA3-224ハッシュを迅速かつ簡単に生成