flexboxの余白

Question

flexboxを使って横並びにすると意図しない余白？が出ますこれは一体何なんでしょうか？

<header> <h1>タイトル</h1> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </header>

css

header {
display: flex;
justify content:space between;
}

ul {
display: flex;
justify content:center;
gap:20px;

この場合、h1とulとの間の余白は、どういう扱いなんでしょうか？
画面幅を狭めていくと、ここがはじめに縮小されていきます。要素自体はflexshark次第？gapも最後まで残るようです。

Comments

[juner]

ソースは ``` で囲ってほしいところです。
https://teratail.com/help#about-markdown
あと、 css は 正しく書いてほしいところです。
もしかして、 - を スペースに置き換えていませんでしょうか？

[paij]

申し訳ございません。
justify-content :space-between;
でした。

[raza]

⚪︎⚪︎は試しましたか？
試した場合は結果を本文に追記ください。解決のヒントを探れるかもしれません。

[paij]

次回からそうさせていただきます。
また、コードが不正確で誤解を招いたことも
注意します。
すみませんでした。

Answer 1

h1とulとの間の余白は、どういう扱いなんでしょうか？

justify-content: space-betweenで確保されるものです。

Comments

[paij]

回答ありがとうございます。

Answer 2

h1 と ul の 余白とはこの黄色の領域の左側のことでしょうか？

であるならば ul の padding ですね。

ul 要素自体はリストの 点を打つ為に予め左側に余白が空いていますので。

playground

と思っていましたが、もしかして

問題に書かれているソースコードと、貴殿の環境のソースコードが違う？

... {
  justify content: space between;
}

じゃなくて

... {
  justify-content: space-between;
}

でしたでしょうか？

であるのであれば

見ての通り justify-content: space-between の仕様通りの挙動です。

playground

MDN には以下の様にあります。

各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。

https://developer.mozilla.org/ja/docs/Web/CSS/justify-content#space-between

以上。

Comments

[paij]

仕様通りの挙動ですか。
つまりmarginでもpaddingでもgapでもない。
ということですか？

[juner]

ただし、 `justify-content` プロパティで制御する余白の持ち方です。両端に詰めて均等割り付けにするのが `space-between` ですし、両端余白も含めて均等割り付けにするのが `space-around` ですし。主軸方向に詰めるのが `start` ですし、 主軸の末尾方向に詰めるのが `end` ですし。（他にもいろいろありますが） どういう空間の持ち方をしたいかで選択するべきところだと思います。

[paij]

ありがとうございました。
誤解を招くコード間違いすいませんでした。

Answer 3

h1とulとの間の余白

単純にulのpaddingでは？
ただしpaddingを0にするとlist-styleが食い込むのであわせて設定をした方がいいでしょう

<style>
header {
display: flex;
justify content:space between;
}
ul {
display: flex;
justify content:center;
gap:20px;
padding:0;
list-style:none;
background-Color:lightgray;
}
h1{
  background-Color:gray;
}
li{
  background-Color:yellow;
}
</style>
<header>
<h1>タイトル</h1>
<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>
</header>

Comments

[juner]

もしかして：ソース誤りで justify content → justify-content / space between → space-between だったりします？

[yambejp]

TO:juner
「 justify content 」完全に無視してました。失礼しました。
確かに正しく書いたときのh1とulの間のスペースはそれですね

[paij]

失礼致します。
私の不正確なコードで混乱を招きました。
すみません。