開発者ツール
CSSフレックスボックスジェネレーター
フレックスボックスレイアウトを視覚的に構築 — ライブプレビューとコピー可能なCSSで方向、ラップ、整列、各要素のプロパティを制御
Container Properties
Live Preview
1
2
3
4
Item 1 Properties
Generated CSS
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;
height: 200px;
}
.item-1 {
}
.item-2 {
}
.item-3 {
}
.item-4 {
}さらに探す
おすすめのその他の 開発者ツール…
JSONフォーマッター
構文ハイライトとエラー検出でJSONを整形、検証、圧縮
試す
Base64エンコーダー/デコーダー
テキストやファイルをBase64にエンコードし、Base64文字列を読めるテキストにデコード
試す
URLエンコーダー/デコーダー
URLコンポーネントとクエリ文字列パラメータをエンコード・デコード
試す
UUIDジェネレーター
ランダムUUID（v1、v4）を生成するか、複数のUUIDを一括生成
試す
ハッシュジェネレーター
テキストやファイルからMD5、SHA-1、SHA-256、SHA-512ハッシュを生成
試す
正規表現テスター
リアルタイムのマッチハイライトとグループ抽出で正規表現をテスト
試す
JWTデコーダー
JSON Web Tokenをデコードして検査 — ヘッダー、ペイロード、署名を確認
試す
HTMLフォーマッター
適切なインデントと構文ハイライトでHTMLコードを整形・美化
試す