6XC

CSS Flexbox 遊び場

flex-direction、justify-content、align-items、wrap、gapをライブのボックスで調整し、コンテナのCSSをコピーします。

852回閲覧

1
2
3
4
5

Flexboxのしくみをざっくり理解する

display: flexを設定すると、コンテナが一次元のレイアウトエンジンに変わります。justify-contentは主軸に沿って要素を配置し、align-itemsは交差軸で要素を揃え、flex-directionは軸そのものを選び、gapはマージンを使わずに要素同士の間隔を作ります。コントロールをいろいろ動かして、番号付きのボックスがその場で並び替わる様子を確かめてみましょう。

よくある質問

要素を完璧に中央揃えにするには?

有名な3行です: display: flex; justify-content: center; align-items: center; — これだけで水平・垂直の中央揃えが一度に完成します。

FlexboxとGrid、どちらを使うべきですか?

Flexboxは、内容に応じてサイズが決まる一次元の行や列(ツールバー、ナビゲーション、カードの並びなど)に強みがあります。Gridは明示的なトラックを使う二次元レイアウトのために作られています。両者は組み合わせて使うこともできます。

関連ツール

CSSグラデーション ジェネレーター ライブプレビューを見ながら線形・放射状・円錐形のCSSグラデーションをデザインし、コードをコピーできます。 使ってみる CSS Box Shadow(ボックスシャドウ)ジェネレーター オフセット・ぼかし・広がり・色・不透明度・内側影(inset)をビジュアルに調整し、ライブプレビューで影をデザインします。 使ってみる CSS Border Radiusジェネレーター 各角を個別に、または一括でpxか%で丸め、ライブプレビューとコピー可能なCSSを確認できます。 使ってみる CSSテキストシャドウ ジェネレーター オフセット・ぼかし・色・不透明度を調整してtext-shadowをデザインし、サンプルテキストでライブプレビューできます。 使ってみる