何をする書き方？
display: flexを親要素に指定すると、その直下の子要素を並べられます。横並びのメニューや、アイコンと文章の組み合わせに便利です。gapで項目の間隔をまとめて指定できます。
基本の形
display: flex;
gap: 16px;justify-content主軸方向の配置。align-items交差軸方向の配置。flex-wrap収まらない項目を折り返す。短い例で確かめる
style.css
.items {
display: flex;
gap: 10px;
}結果
項目が横に並び、間に10pxの余白が入ります。
準備・実行方法を確認する
HTMLのheadに <link rel="stylesheet" href="style.css"> を入れ、同じフォルダーにstyle.cssを作ります。HTMLをブラウザーで開き、保存後に再読み込みして確認します。
もう少し詳しいコードを見る
style.css
.menu {
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}結果
class="menu"の直下の要素が横に並びます。幅が足りなくなると、次の行に折り返します。
ここで、書き換えてみよう
文字や数字を変えたら「実行する」を押します。変更したコードは、ページを移動すると元に戻ります。
一問だけ、復習しよう
「Flexboxで横に並べる」の書き方はどれ？
少し変えてみよう
HTMLに <nav class="menu"><a>ホーム</a><a>記事</a><a>連絡先</a></nav> を置いて試しましょう。
つまずいたら、ここを確認
flexは並べたい要素の「親」に指定します。子要素に指定するだけでは兄弟要素は並びません。
自分の言葉でメモ
記録はこのブラウザーに保存されます。