display: flex;のjustify-contentが効かない

前提・実現したいこと

display: flex;で指定したボックスに対して
justify-content: space-around;を適用させたい

発生している問題・エラーメッセージ

justify-content: ;が効かない

該当のソースコード

HTML
1<div class="flex-container">
2            <div class="left">
3                <div class="title">文字です。文字です。文字です。</div>
4                <p class="desc">
5                    文字です。文字です。文字です。文字です。文字です。
6                </p>
7            </div>
8            <div class="right">
9                <div class="title">文字です。</div>
10                <p class="desc">
11                    文字です。文字です。文字です。文字です。
12                </p>
13            </div>
14</div>

CSS
1.flex-container{
2    display: flex;
3    align-items: center;
4    justify-content: space-around;
5    height: 200px;
6    margin-top: 30px;
7    width: 80%;
8}
9.flex-container .left{
10    margin-right: 60px;
11}
12.flex-container .title{
13    font-size: 2.4rem;
14    margin-bottom: 20px;
15    font-weight: 700;
16    letter-spacing: 0.05em;
17}
18.flex-container .desc{
19    font-size: 1.6rem;
20    letter-spacing: 0.05em;
21    line-height: 2rem;
22}

試したこと

他の部分のcssの見直し

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

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

justify-content: space-around;はフレックスアイテムの幅の合計がフレックスコンテナの幅より小さいとき、その余白をフレックスアイテム間に均等に分配するという意味です。

提示のHTMLでは余白がないので、効いてないようにみえるだけです。
フレックスアイテムの中身のテキストが多いのでフレックスコンテナの幅一杯に広がっているためです。

例えば下記のようにアイテムの幅をコンテナのは場より狭く指定すると、余白の60pxが均等に分配されているのが確認できます。
15px [LeftBox] 30px [RightBox] 15px というように。

css
1.flex-container{
2    display: flex;
3    align-items: center;
4    justify-content: space-around;
5    height: 200px;
6    margin-top: 30px;
7    width: 80%;
8    background-color: pink; /* サイズ確認のため */
9}
10.flex-container > div {
11    background-color: aqua; /* サイズ確認のため */
12    width: calc(50% - 60px); /* 幅指定 */
13}
14
15.flex-container .left{
16/*  margin-right: 60px; */
17}