CSS
Flexboxシミュレーター
親要素に display: flex を付けると、子要素の並び方を指定できます。左の値を切り替えると、プレビューとコードがすぐ変わります。各プロパティ名を押すと、リファレンスの説明に移ります。
操作パネル
display
flex子要素の数1〜6個
プレビュー
2番目は背を高く、3番目は文字を大きくしています。align-items の違いが見えやすくなります。
HTML / CSS
初期値から変えた行に「変更」の印が付きます。コピーしたコードに印は入りません。
<div class="container"> <div class="item">1</div> <div class="item item--tall">2</div> <div class="item item--large">3</div></div>.container { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 0px; /* ここから下は見た目を分かりやすくする指定 */ min-height: 240px; padding: 12px; border: 2px dashed #a9a6d6; border-radius: 12px; background: #f4f3fb;} .item { min-width: 7rem; padding: 12px 16px; border: 2px solid #4b47a6; border-radius: 8px; background: #e7e6fb; color: #1e1c5a; font-weight: 700; font-size: 1rem; text-align: center; box-sizing: border-box;} /* 2番目だけ背を高くする（align-items の違いが見えやすい） */.item--tall { padding-block: 32px;} /* 3番目だけ文字を大きくする（baseline の違いが見えやすい） */.item--large { font-size: 1.75rem;}