margin:0 auto;で中央寄せにした要素に幅を持たせたい

Question

下記のコードで要素が３つあります。
レスポンシブ対応にしたいため、ブラウザを縮めても中央寄せのまま縮まっていって、
max-widthが768になったらスマホ対応画面にします。

ところが、768になる前（もっと大きい段階）から、
中央寄せが崩れてしまいます。

中央寄せになったまま768のギリギリまで縮まっていくにはどうすればいいでしょうか？

    <footer class="footer">
        <ul class="f-menu">

            <li class="f-list">
        <div class="circle">
        <i class="fas fa-dumbbell fa-6x" data-fa-transform="down-9.5 right-7.5"></i>        
        
        <div class="t-1">あいうえお</div>
        <div class="t-2">かきくけこ</div>
    </div></li>

   <li class="f-list">
        <div class="circle">
        <i class="fas fa-chalkboard-teacher fa-6x" data-fa-transform="down-9.5 right-7.5"></i>
        
        <p class="t-1">さしすせそ</p>
        <p class="t-2">たちつてと</p>
   </div></li>

        <li class="f-list">
        <div class="circle">
        <i class="far fa-life-ring fa-6x" data-fa-transform="down-9.5 right-9.5"></i>        
        
        <p class="t-1">なにぬねの</p>
        <p class="t-2">はひふへほ</p>
    </div></li>
    </ul>


        </footer>

.footer{
    height: 230px;
    background-color: black;
    display: flex;

}

.circle {
    width: 225px;
    height: 225px;
    border-radius: 50%;
    background: #fff;/*背景色*/
    border: 6px solid #121212; /*枠の設定*/
    margin-top: -192px;
　　margin:-192px 55px 0px 45px;
    
  }

.f-menu{
    display: flex; //3つのアイコンを横並びにするために設定
    justify-content: space-between;
    margin: 0 auto;

}

.f-list{

    z-index: 5;

    width: auto;
}
.t-1{
    color: #fff;
    margin: 125px 0px 0px 50px;
    font-size: 23px;
    font-weight: bold;
}


.t-2{
    color: #fff;
    margin: 7px -2px 0px -14px;
    font-weight: bold;
}

Comments

[Lhankor_Mhy]

コードを試してみましたが、「中央寄せ」になっていないように見えました。

ご提示いただいていない部分のコードが必要なのではないでしょうか。

[B_J]

margin: 0 auto;でなってませんか？

[Lhankor_Mhy]

はい、なっていないですね。

すみませんが、質問に提示するコードで問題が再現することを、ご質問者の環境で確認してから質問をしてください。
それぞれが違うコードを見ながら違う現象について議論をするのは、お互いに時間の無駄ではありませんか？
https://twitter.com/lhankor_mhy/status/1169432868705075200

[B_J]

失礼しました。白い丸が3つあると思うのですが、それの幅をもっと100pxほどに広げたママ縮んでいってほしいのです

[B_J]

すみません、最初は100pxほどの余白が3つの丸には設定していて、縮めていくと、中央に寄ったままどんどん縮んでいってほしいのです。
言い方を間違えました。失礼しました。縮めていくと丸と丸の距離はもちろん中央寄せにしていくので縮んでいくようにしたいんです。

[Lhankor_Mhy]

現状のコードでそのようになっているように見えます。

[B_J]

確認しましたが、ならないのです、、、

[Lhankor_Mhy]

ああ、失礼しました。当方でいろいろ試していて混乱しました。
回答します。

[B_J]

ありがとうございます。ダメです・・・。全体的に広がり過ぎてしまいますし、ブラウザを縮めていっても、やはり途中から中央寄せじゃなくなってしまいます・・・難問ですね・・・

[B_J]

そもそも、margin:0 auto;って設定すると、その要素同士の余白は自由に設定できなくなるんでしょうか？中央寄せにするのと、自由に余白を設定することは、両方は出来ない？！

[Lhankor_Mhy]

ちょっと、どうしたいのかがよくわからないです。

[B_J]

幅が７６８pxほど（スマホサイズ）に縮んでいくまで、中央寄せかつ３つの丸に幅１００pxの余白を持たせた状態で縮小していきたいのです。

margin: 0 auto;を設定すると、３つがぴったりと並んでしまい、余白ができません。
それで、margin:0 auto;を設定しないで、余白を設定すると、今度は中央寄せができなくなります。できなくなるというか、途中まで中央寄せで進むのに、途中から中央寄せにならなくなってしまうんです

本当に困っています。誰も答えられる人が居ません

[Lhankor_Mhy]

.circle の幅が225px、余白を100pxとすると、合計で875pxになり、768pxを超えますが……？

[Lhankor_Mhy]

いずれにせよ、ちょっとご希望がわからなくなってきました。
質問を解読できたら、また回答します。

[B_J]

質問をかえます。３つの丸にmargin: 0 auto;を設定したら中央寄せになりますよね？中央寄せしたままその３つの要素に自由に余白を設定することはできますか？またそれはどうやればいいですか？

[Lhankor_Mhy]

縮んでいくとかそういうことは考えなくていいのですね？
中央寄せ　かつ　3つの丸が固定間隔で配置されていればいい、ということでいいですか？

[B_J]

考えたいです。

中央寄せにして、かつ３つの丸同士がある程度離れていて、中央寄せの状態で７６８PXまで縮んでいってほしいのです。イメージ湧きますでしょうか？

中央寄せのままブラウザを縮小させていくため、その３つの丸同士の余白はだんだん無くなってきます。
そして、７６８ぐらいの幅になったらほぼその３つの丸同士が横一列にくっついた感じになって、
スマホのレスポンシブ対応画面になるといった感じです

[Lhankor_Mhy]

では、先の回答の通りではないですか？
3つの丸が離れていて、最終的にくっつきましたが。

[B_J]

いえ、下記のご返信させていただいたとおり、ダメなのです・・・↓

ありがとうございます。ダメです・・・。全体的に広がり過ぎてしまいますし、ブラウザを縮めていっても、やはり途中から中央寄せじゃなくなってしまいます・・・難問ですね・・・

[B_J]

あ、codepenでやったら、なりますね・・・。
なら、別のところが影響しているってことですかね・・・
一歩進めました。
ほんとうにありがとうございます

[B_J]

ただ、アドバイスいただいたコードですと、丸３つの要素が広がり過ぎているので、ここをなんとか、１００pxの幅に設定できないでしょうか？

[Lhankor_Mhy]

縮んでいくことは考えなくていいのですか？

[B_J]

いえ、レスポンシブ対応させるためさきほどのようにしたいです

[Lhankor_Mhy]

最大100pxにしたいということですか？

[B_J]

最初の状態、縮めていない状態（デスクトップ対応ブラウザの幅）で100pxってことです

[Lhankor_Mhy]

余白の最大が100pxで、そこから縮むのは成り行き、という理解で合っていますか？
それとも、たとえばスクリーンが1600pxの時に100pxで1400pxの時に80px、みたいな処理をしたいということですか？

[B_J]

デスです！そんなイメージじです。ただ、結果として768あたりで、ぴったりくっつくぐらいにはなります

[B_J]

ですです！は前者です！ってことです

[B_J]

下記のようにやったらできました。

```css

.footer{
height: 230px;
background-color: black;
//display: flex;

}
.circle {
/*width: 225px;*/
width: 225px;
box-sizing: border-box; /* 追加 */
height: 225px;
border-radius: 50%;
background: #fff;/*背景色*/
border: 6px solid #121212; /*枠の設定*/
margin-top: -192px;
//margin:-192px 55px 0px 45px;

}

.f-menu{
display: flex; /* //3つのアイコンを横並びにするために設定 */
justify-content: space-between;
margin: 0 auto;
max-width: 867px; /* 追加 */

}

.f-list{

z-index: 5;

width: auto;
}
.t-1{
color: #fff;
margin: 125px 0px 0px 50px;
font-size: 23px;
font-weight: bold;
}

.t-2{
color: #fff;
margin: 7px -2px 0px -14px;
font-weight: bold;
}
```

ポイントは、
```css
.f-menu{
display: flex; /* //3つのアイコンを横並びにするために設定 */
justify-content: space-between;
margin: 0 auto;
max-width: 867px; /* 追加 */

}
```
です。margin: 0 auto;で中央寄せにして、かつmax-width: 867px; をすることで、3つの円の余白も実質調整できました。

ただ、footerなどに、max-width：～pxなどの設定は何故不要なのでしょうか？

[Lhankor_Mhy]

私の回答通りでしたね。お役に立てたようで何よりです。

footer に max-width を入れるとマージン分の余白がなくなると思います。

[B_J]

あと、
.footer{
height: 230px;
background-color: black;
//display: flex;

display: flex;を有効にしちゃうと、なぜ円同士が最初っからくっついちゃうのですか？

[B_J]

たとえば、footer に max-width：1078px と入れると、３つの円が全体的に左側に移動しました。
なぜ？！といった感じです

[B_J]

そうなんです、教えて頂いたとおりですが、max-width: 968px; /* 追加 */の部分だけ、幅を867pxに変えています。

いろいろと教えて下さい。
どのように考えて、アドバイスいただいたコードになったのか、知りたいです。
宜しくお願いします。

[Lhankor_Mhy]

>display: flex;を有効にしちゃうと、なぜ円同士が最初っからくっついちゃうのですか？

フレックスアイテム（display:flexの子要素）の幅は内容物依存になるからです。
つまり、最小限まで小さくなるので、justify-content: space-between のための余白が残らないのです。

---

>footer に max-width：1078px と入れると、３つの円が全体的に左側に移動しました

.footer には、margin: 0 auto がないからです。

[B_J]

少しわかってきました。ありがとうございます。
内容物依存とはどこの内容物に依存？するのでしょうか？

.footer には、margin: 0 auto がないからです。
➡でもfooter自体にはもともと幅はあるものなのでは？

[Lhankor_Mhy]

フレックスアイテムの子要素です。display:flex から見ると 孫要素ですね。

たとえば、

display:flex の要素
子要素（フレックスアイテム）
孫要素　=　幅500pxの画像

とあった時に、子要素の幅は500pxになります。

[Lhankor_Mhy]

> でもfooter自体にはもともと幅はあるものなのでは？

まず、マージンの初期値は0です。これは何も指定しない場合、マージンはゼロになるということです。
つまり、margin-left: 0 なので左によります。

margin: 0 auto を指定した場合は、margin-left: auto なので、中央に寄ります。

[B_J]

いつもあなたさまほど親身になってくださる方はおらず本当に感謝してます、またへんしんします

[B_J]

どのように考えて、アドバイスいただいたコードになったのか、知りたいです。
宜しくお願いします。

[Lhankor_Mhy]

まず、「結果として768あたりで、ぴったりくっつく」ということでしたので、768/3=256pxまで.f-listの幅を広げました。（そうしないと、ぴったりくっつかないはずなので）

そして、余白を開けるためには、.f-menu の幅が伸縮しないといけないので、.footer の flex を外しました。

最後に、余白が最大100pxということなので、768+100+100=968pxで .f-menu の幅を制限しました。

Answer 1

以下のようにするとどうでしょうか？

.footer{
    height: 230px;
    background-color: black;
    /* display: flex; 削除*/

}
.f-menu{
    display: flex; /* //3つのアイコンを横並びにするために設定 */
    justify-content: space-between;
    margin: 0 auto;

}

---

補足依頼欄に合わせて追記

.footer{
  height: 230px;
  background-color: black;
  /* display: flex; 削除*/

}


.circle {
    /*width: 225px;*/
    width: 256px;
    box-sizing: border-box; /* 追加 */
    height: 225px;
    border-radius: 50%;
    background: #fff;/*背景色*/
    border: 6px solid #121212; /*枠の設定*/
    margin-top: -192px;
　　margin:-192px 55px 0px 45px;

  }

  .f-menu{
    display: flex; /* //3つのアイコンを横並びにするために設定 */
    justify-content: space-between;
    margin: 0 auto;
    max-width: 968px; /* 追加 */
  
  }

Comments

[B_J]

ありがとうございます。ダメでした・・・。３つの丸が、楕円みたいになってしまい、縮小時の現象
も変わりません・・・

[Lhankor_Mhy]

幅を広げたので楕円になるのは仕方がないですね。そこらへんは調整してください。

[B_J]

それに、space-betweenがきいてるせいか、３つの丸がひろがりすぎちゃいます

[Lhankor_Mhy]

広がりすぎる、という現状は、当方では確認できないです。

Answer 2

下記のようにやったらできました。

.footer{
    height: 230px;
    background-color: black;
    //display: flex;
    

}
.circle {
    /*width: 225px;*/
    width: 225px;
    box-sizing: border-box; /* 追加 */
    height: 225px;
    border-radius: 50%;
    background: #fff;/*背景色*/
    border: 6px solid #121212; /*枠の設定*/
    margin-top: -192px;
    //margin:-192px 55px 0px 45px;

  }

  .f-menu{
    display: flex; /* //3つのアイコンを横並びにするために設定 */
    justify-content: space-between;
    margin: 0 auto;
    max-width: 867px; /* 追加 */

  }

.f-list{

    z-index: 5;

    width: auto;
}
.t-1{
    color: #fff;
    margin: 125px 0px 0px 50px;
    font-size: 23px;
    font-weight: bold;
}


.t-2{
    color: #fff;
    margin: 7px -2px 0px -14px;
    font-weight: bold;
}

ポイントは、

  .f-menu{
    display: flex; /* //3つのアイコンを横並びにするために設定 */
    justify-content: space-between;
    margin: 0 auto;
    max-width: 867px; /* 追加 */

  }

です。margin: 0 auto;で中央寄せにして、かつmax-width: 867px; をすることで、3つの円の余白も実質調整できました。

ただ、footerなどに、max-width：～pxなどの設定は何故不要なのでしょうか？