webサイトのコーディングを行っているのですが、
CSSでのjustify-content: space-between;が効かず…
ご意見いただければ幸いです。

検証ツールでもちゃんと記述できているように見えます。
また、font-sizeの指定がh要素やa要素には効くのですがp要素には効かないという症状もあり…
可能であれそちらもご意見いただけますでしょうか。

よろしくお願いいたします。

HTML

html
1  <!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <title>design for smile</title>
7    <meta name="descriptation" contact="design for smile">
8    <meta name="viewport" content="width=device-width, initial-scale=1">
9    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
10    <link rel="stylesheet" href="css/style.css">
11    <link rel="icon" type="mage/png" href="img/culture-img.png" sizes="16x16"/></script>
12  </head>
13
14  <body>
15    <header>
16      <div class="header-item">
17        <p>1</p>
18        <p>2</p>
19      </div>
20    </header>
21  </body>
22</html>

CSS

css
1@charset "UTF-8";
2html {
3  font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif;
4  font-size: 62.5%;
5}
6
7a {
8  text-decoration: none;
9  color: white;
10}
11
12img {
13  max-width: 100%;
14}
15
16body {
17  font-size: 1.6em;
18}
19
20p {
21  font-size: 1.5rem;
22}
23
24
25
26.header-item {
27  display: flex;
28  justify-content: space-between;
29  position: fixed;
30}

行動規範の内容に同意します

回答1件

ベストアンサー

position: fixed; を設定すると通常のフローから外れ、浮いた状態になります。
そのため、width か left right で幅を指定しないと、コンテナの幅は広がらないので、
justify-content: space-between; を設定しても効いてないようにみえます。

下記のように幅を指定してあげれは左右に広がります。

css
1.header-item {
2  display: flex;
3  justify-content: space-between;
4  position: fixed;
5  left: 0;
6  right: 0;
7}

投稿2020/08/08 14:00

hatena19

総合スコア34075

miyabi_pudding

2020/08/08 14:05

横槍すみません、そうか、widthで指定するより、その方が自然な大きさになるわけですね・・・。勉強になりました。テクニックのレパートリーにいれさせていただきます。

hatena19

2020/08/08 14:13

私も width: 100% でいいかと思ったんですがちょっと画面からはみでるんですよね。そこで、left right に変更しました。なぜ、はみ出るのかはちょっと分かりません。

miyabi_pudding

2020/08/08 14:17

なんと。 flexとfixed合わせるとコンテンツモデルが変わるんですかね・・・。私もいろいろ試してみようと思います。

hatena19

2020/08/08 14:35

デベロッパーツールでみてみると、width: 100% としたときは、left: 8px; right: -8px; なってますね。（Computed のボックスモデルの図で確認できます。） body のデフォルトのマージン8pxということでしょうか。 body { margin: 0; } とするとはみ出なくなりました。