justify-contentが効きません。

現段階

理想像

このように並べたいのでjustify-content:space-around;を効かせたいのですが、
できません。初歩的な質問で申し訳ありませんが、手助けしていただけるとありがたいです。
HTML

<div class="footer-1-group">
      
      <div class="footer-1-item">
        <img src="../images/Write-copy-2.png">
        <p>Jone Doe</p>
        <p>
          これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文
          ・ソーシャルリンク（最大７つ）を設定することができます。
        </p>
      </div>

      <div class="footer-1-item">
        <strong>フッター右</strong>
        <p>３つのフッター右ウィジェットエリアはフッターの右側に表示され、
          使用する数によって幅は自動的に調整されます。１つも使用しない場合には表示されません。
        </p>
      </div>

      <div class="footer-1-item">
        <strong>最近の投稿</strong>
        <ul>
          <li>
            <a class="q">書くためのテーマ</a><br>
            <span>2018年9月1日</span>
          </li>

          <li>
            <a class="q">画像付きの投稿</a><br>
            <span>2018年3月5日</span>
          </li>

          <li>
            <a class="q">引用付きの投稿</a><br>
            <span>2018年3月5日</span>
          </li>
        </ul>
      </div>

      <div class="footer-1-item">
        <strong>カテゴリー</strong>
        <ul>
          <li><a class="q">サンプル投稿</a></li>
          <li><a class="q">投稿フォーマット</a></li>
          <li><a class="q">普通の投稿</a></li>
        </ul>
      </div>

    </div>

CSS

.footer-1-group{
  display:flex;
  justify-content:space-around;
}
.footer-1-item{
}
ul{
  list-style: none;
  padding:0;
}
.q{
  color:black;
  display: inline-block;
  border-bottom: 1px #aaa solid;
}

ちなみにですが.qのinline-blockはborder-bottomの長さ調節のために入れています。
どうか解決策をお願いします。

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

回答3件

ベストアンサー

flexアイテム（子要素）に flex で適切な拡張、縮小、幅を設定すればいいでしょう。

画像をみて適当にそれらしく設定してみましたが、細かい調整はご自身でしてください。

css
1.footer-1-group{
2  max-width: 1000px;
3  margin: 0 auto;
4  display:flex;
5  justify-content:space-around;
6}
7.footer-1-item{
8  flex: 0 0 20%;
9}
10.footer-1-item:nth-child(1){
11  flex: 0 1 30%; /*左1列の幅設定*/
12}
13ul{
14  list-style: none;
15  padding:0;
16}
17.q{
18  color:black;
19  display: inline-block;
20  border-bottom: 1px #aaa solid;
21}
22
23.footer-1-item > img {
24  float: left; /*回り込み*/
25  border-radius: 50%;
26  margin-right: 20px;
27}
28
29.footer-1-item > img + p {
30  margin-top: 20px;
31}
32
33.footer-1-item > img + p + p {
34  clear: both; /*回り込み解除*/
35}

Codepenサンプル

投稿2020/04/19 08:54

編集2020/04/19 09:01

hatena19

総合スコア34075

こんにちは

各 .footer-1-item のwidthを指定すればよいかと思います。その際、間隔をあけるため、合計が100%に足りない数値にしておきます。以下は、widthの合計が 90%になるように配分しました。また、目視で確認しやすくするために背景色をつけています。

css
1.footer-1-item:nth-of-type(1) { width: 36%; background-color: #BED7D1; }
2.footer-1-item:nth-of-type(2) { width: 18%; background-color: #F7EBC3; }
3.footer-1-item:nth-of-type(3) { width: 18%; background-color: #FBD6C6; }
4.footer-1-item:nth-of-type(4) { width: 18%; background-color: #F8E1E7; }
5

間隔をもう少し詰めたかったら、合計が 90% を超えるように調整します。また上記では、２番目以降のfooter-1-itemの幅が等しい設定になっていますが、これも調整するため、合計の90数％という数を、適宜、配分します。

動作確認用CodePen: https://codepen.io/jun68ykt/pen/MWaeBRE?editors=1100

投稿2020/04/19 08:52

編集2020/04/19 08:57

jun68ykt

総合スコア9058

divの大きさを決めてください。
すべて同じ幅だとあまりにも微妙なのでカテゴリーと最近の投稿は短めの幅にしましたがご自分で調整なさってください。

html
1<div class="footer-1-item short-item">  /* 追記 */
2  <strong>最近の投稿</strong>
3  <ul>
4    <li>
5      <a class="q">書くためのテーマ</a><br>
6      <span>2018年9月1日</span>
7    </li>
8    <li>
9      <a class="q">画像付きの投稿</a><br>
10      <span>2018年3月5日</span>
11    </li>
12    <li>
13      <a class="q">引用付きの投稿</a><br>
14      <span>2018年3月5日</span>
15    </li>
16   </ul>
17</div>
18<div class="footer-1-item short-item">　　/* 追記 */
19  <strong>カテゴリー</strong>
20  <ul>
21    <li><a class="q">サンプル投稿</a></li>
22    <li><a class="q">投稿フォーマット</a></li>
23    <li><a class="q">普通の投稿</a></li>
24  </ul>
25</div>

css
1.footer-1-group{
2  display:flex;
3  justify-content:space-around;
4  width: 1000px;
5  margin: 0 auto;
6}
7
8.footer-1-item{
9  width: 250px;
10}
11
12.short-item {
13  width: 200px;
14}