CSSにて、align-items と　justify-content:space-between が効きません。

前提・実現したいこと

ブラウザに、align-itemsとjust-content:space-betweenが適用されるように表示したいです

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4		<meta charset="UTF-8">
5<link rel="stylesheet" type="text/css" href="style.css">
6	<title>模写</title>
7</head>
8<body>
9<header class="page-header">
10			<h1 class="page-header__logo">
11				<img alt="sample">
12			</h1>
13			<div class="page-header__info page-header-info">
14				<div class="page-header-info__txt">
15					<span>TEL 08073773</span>
16					<span> 受付時間　平日8時〜１４時</span>
17					<a class="page-header-info__btn" href="#contact">お問合せ</a>
18</div>
19
20</header>
21
22<main class="main-content">
23		メインコンテンツ
24<div class="main-visual">
25			メインビジュアル
26<section class="intro-section">
27				イントロセクション
28<div class="intro-section__header section-header" >
29ヘッダー
30</div>
31
32<nav class="intro-section__nav">
33ナビゲーション
34</nav>
35
36<div class="intro-section__content">
37コンテンツ
38</div>
39
40<div class="intro-section__contact">
41<div class="contact-block">
42お問合せ
43</div>
44</div>
45</section>
46</main>
47
48<footer class="page-footer">
49</footer>
50	</body>
51	</html>
52
53

CSS
1body{
2	font-size: 1.8rem;
3		text-align: center;
4}
5
6.page-header,
7.page-footer,
8.main-content{
9	margin:30px,0;
10	border:5px solid red;
11}
12.main-visual,
13.intro-section{
14	margin:30px,0;
15	border:5px solid green;
16}
17
18.intro-section__header,
19.intro-section__nav,
20.intro-section__content,
21.intro-section__contact{
22	margin:30px,0;
23	border:5px solid blue;
24}
25
26.page-header{
27	display:flex;
28	align-items:center;
29	justify-content:space-between;
30}
31.page-header__info{
32	display:flex;
33	align-items:center;
34	justify-content:space-between;
35}
36.page-header-info__txt span{
37	display:block;
38}

試したこと

インターネット、SNSで検索。

補足情報（FW/ツールのバージョンなど）

使用している物
PC:Mac
ブラウザ:Safari

8zca

2019/08/06 12:52

実現したいことが曖昧なのですが、具体的にどこがどのように表示されればよいのでしょうか？ TEL、受付時間、お問合せ　を justify-content:space-between で均等に配置したい、ということであっていますか？

koki1124

2019/08/06 12:57

返信ありがとうございます！そうです。なぜかブラウザで表示されないのです。よろしくお願いします！

yoshinavi

2019/08/06 22:19

HTMLはもっとシンプルに出来そうな気がします。 flexがどの要素に対して、どのように働くのかをもう一度考察し、HTMLを含めて見直されたほうが良いかと思います。

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

回答2件

以下のコードでCSSが効いていることが確認できました。
CSSとHTMLの書き方が汚いのでインデントを付けて
きれいに記述したほうが良いです。
あとmargin:30px,0;ではなくmargin:30px 0;です。

HTML
1<style>
2body {
3  font-size: 1.8rem;
4  text-align: center;
5}
6.page-header,
7.page-footer,
8.main-content {
9  margin: 30px 0;
10  border: 5px solid red;
11}
12.main-visual,
13.intro-section {
14  margin: 30px 0;
15  border: 5px solid green;
16}
17.intro-section__header,
18.intro-section__nav,
19.intro-section__content,
20.intro-section__contact {
21  margin: 30px 0;
22  border: 5px solid blue;
23}
24.page-header {
25  display: flex;
26  align-items: center;
27  justify-content: space-between;
28}
29.page-header__info {
30  display: flex;
31  align-items: center;
32  justify-content: space-between;
33}
34.page-header-info__txt span {
35  display: block;
36}
37</style>
38<header class="page-header">
39  <h1 class="page-header__logo"></h1>
40  <img alt="sample" />
41  <div class="page-header__info page-header-info">
42    <div class="page-header-info__txt">
43      <span>TEL 08073773</span>
44      <span> 受付時間　平日8時〜１４時</span>
45      <a class="page-header-info__btn" href="#contact">お問合せ</a>
46    </div>
47  </div>
48</header>

投稿2019/08/06 15:14

yasutomi

総合スコア2937

koki1124

2019/08/07 07:23

回答ありがとうございます！綺麗に書くことを意識します。

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

ベストアンサー

前提：TEL、受付時間、お問合せの部分に対して効かせたい

HTMLの構造的に

page-header__info
  `- page-header-info__txt
       |- span
       |- span
       `- a

の階層構造になっていますよね？

page-header__infoのクラスでjustify-contentを設定されていますが、 page-header__info のクラス直下にはpage-header-info__txtのdivしか無いため、1つの要素に対してjustify-contentが効いている状態です。
TEL、受付時間、お問合せを3つ並べたい場合はpage-header-info__txtに対して設定してあげれば3つの要素が並びます。

投稿2019/08/06 13:26

8zca

総合スコア559