display:flex;のjustfy-contentに関して

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Progate</title>
7  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
8  <link rel="stylesheet" href="main.css">
9</head>
10<body>
11  <header>
12    <div class="container">
13      <div class="header-left">
14        <p>Progate</p>
15      </div>
16      <div class="header-right">
17        <a href="#">レッスン</a>
18        <a href="#">新規登録</a>
19        <a href="#">ログイン</a>
20      </div>
21    </div>
22  </header>
23  <div class="top-wrapper">
24    <div class="container">
25      <div class="top">
26        <h1>LEARN TO CODE.
27        </br>
28          LEARN TO BE CREATIVE.</h1>
29      </div>
30      <div class="middle">
31        <p>progateはオンラインプログラミング学習サービスです。</br>
32          初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
33      </div>
34      <div class="under">
35        <a href="#" class="btn signup">新規登録はこちら</a></br>
36        <p>or</p>
37        <a href="#" class="btn facebook"><i class="fab fa-facebook-f"></i>&nbsp;&nbsp;Facebookで登録</a>
38        <a href="#" class="btn twitter"><i class="fab fa-twitter"></i>&nbsp;&nbsp;Twitterで登録</a>
39      </div>
40    </div>
41  </div>
42  <div class="main-header">
43    <h2>Learn Where to Get Started</h2>
44  </div>
45  <div class="lessons">
46      <div class="lesson">
47        <div id="content">
48          <img src="https://prog-8.com/images/html/advanced/html.png" alt="">
49          <p>HTML&CSS</p>
50        </div>
51        <p class="word">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
52      </div>
53      <div class="lesson">
54        <div id="content">
55          <img src="https://prog-8.com/images/html/advanced/jQuery.png" alt="">
56          <p>jQuery</p>
57        </div>
58        <p class="word">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
59      </div>
60      <div class="lesson">
61        <div id="content">
62          <img src="https://prog-8.com/images/html/advanced/ruby.png" alt="">
63          <p>Ruby</p>
64        </div>
65        <p class="word">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
66      </div>
67      <div class="lesson">
68        <div id="content">
69          <img src="https://prog-8.com/images/html/advanced/php.png" alt="">
70          <p>PHP</p>
71        </div>
72          <p class="word">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
73      </div>
74  </div>
75  <div class="buttom-wrapper">
76    <div class="container">
77      <p>さぁ、あなたもProgateでプログラミングを学んでみませんか?</p></br>
78        <p>Let's learn to code, learn to be creative!</p>
79        <button type="button">さっそく開発する</button>
80    </div>
81  </div>
82  <footer>
83    <div class="container">
84      <p>Progate</p>
85      <p>Learn to Code, Learn to be Creative.</p>
86    </div>
87  </footer>
88</body>
89</html>
90
91

css
1body {
2  margin:0 auto;
3  padding: 0;
4}
5.header-left {
6  float:left;
7  p {
8    font-size: 18px;
9    padding-left: 20px;
10    color:white;
11  }
12}
13.header-right {
14  float:right;
15  // margin-top:5px;
16  a {
17    line-height: 65px;
18    color: white;
19    text-decoration: none;
20    padding:0 25px;
21    display: block;
22    float: left;
23    transition: all 0.5s;
24  }
25}
26.header-right a:hover {
27  background-color: rgba(255,255,255,0.3);
28  }
29
30header {
31  width:100%;
32  height: 65px;
33  background-color: rgba(34,49,52,0.9);
34  margin:0;
35  padding:0;
36  position: fixed;
37  z-index: 10;
38  // opacity: 0.9;
39}
40
41.container {
42  width:100%
43}
44
45.top-wrapper {
46  background-image: url(img/work.jpg);
47  height: 500px;
48  text-align: center;
49  color: white;
50  padding:180px 0 100px;
51}
52
53.top {
54  font-size: 26px;
55}
56.middle {
57  font-size: 16px;
58  padding-bottom: 50px;;
59}
60
61.under {
62  text-align: center;
63  p {
64    margin-bottom: 20px;
65  }
66  a {
67    &:hover {
68      opacity: 1.0;
69    }
70  }
71}
72
73
74.signup {
75  background-color: #66cdaa;
76}
77.facebook {
78  background-color: #3b5998;
79  margin-right: 10px;
80}
81.twitter {
82  background-color: #55acee;
83  margin-right: 12px;
84}
85
86.btn {
87  padding: 8px 24px;
88  display: inline-block;
89  color: white;
90  opacity: 0.8;
91  text-align: center;
92  border-radius: 4px;
93  font-size: 16px;
94  cursor: pointer;
95  text-decoration: none;
96}
97.lessons {
98  display: flex;
99  justify-content: space-around;
100}
101.lesson {
102  text-align: center;
103}
104.word {
105  font-size: 13px;
106}

display:flex;を用いて、画像の要素を横に並び替える部分まではできています。
そこで、justyfy-content:space-around;で均等に並べたいのですが、効きませんでした。

調べると、余分なmarginが入っていたり、beforやcontentが入っていると効かないそうなのですが、特にそのようなコードは書いていません。

floatとwidthで均等に配置するしか方法はないでしょうか？

すみませんが、よろしくお願いいたします。

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

回答1件

ベストアンサー

横幅が指定されていないからだと思います。
例えばこちらだといかがでしょうか?

CSS
1.lesson {
2  flex-grow: 0;
3  flex-shrink: 1;
4  /* flex-basis: 200px; */ /* こちらでもOKだと思います。 */
5  flex-basis: calc((100% - 200px) / 4); /* 各要素の横幅です。好きな値を設定してください。 */
6}