Flexを含んだmargin: 0 auto;

Question

前提・実現したいこと

HTMLとCSSであるサイトを作っているのですがFlexBoxを使っていると以下のような問題が起きました。

発生している問題

以下の画像のように作っています。
黒枠がページ幅、オレンジ色がdiv、緑色がh4、青枠がFlexコンテナ、紫がFlexアイテムとなっています。

この構造を"Margin: 0 auto"で中央寄せしたいのですができませんでした。

デベロッパーツールを使ってみてみると
青色をFlexBoxを使って横並びにした場合、Flexコンテナが画面幅いっぱいに取られていました。

この構造を画面の中央寄せする方法ってありませんか？

以下がコードになります。

           <div class="hosting-learn-media1127">
                <div class="hosting-items">
                    <h4><strong>ヘッダー４</strong></h4>
                        <div class="flexbox-media1127-2">
                            <div class="hosting-item">
                                <div class="hosting-image1"></div>
                                <div class="hosting-sentence">
                                    <p class="hosting-heading"><strong>準備１</strong></p>
                                    <p class="hosting-paragraph">テキスト１</p>
                                </div>
                            </div>
                            <div class="hosting-item">
                                <div class="hosting-image2"></div>
                                <div class="hosting-sentence">
                                    <p class="hosting-heading"><strong>準備２</strong></p>
                                    <p class="hosting-paragraph">テキスト２</p>
                                </div>
                            </div>
                            <div class="hosting-item">
                                <div class="hosting-image3"></div>
                                <div class="hosting-sentence">
                                    <p class="hosting-heading"><strong>準備３</strong></p>
                                    <p class="hosting-paragraph">テキスト３</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

    .flexbox-media1127-2 {
        display: flex;
    }

    .hosting-learn-media1127 {
        display: block;
        width: 100%;
        margin-bottom: 5rem;
    }

    .hosting-items {
        display: block;
        width: 100%;
        padding: 0 24px;
        margin: 0 auto;
    }

    .hosting-item {
        width: 12.75rem;
        margin-right: 1rem;
    }

    .hosting-sentence {
        border-right: solid 1px rgba(120,120,120,0.4);
        border-bottom: solid 1px rgba(120,120,120,0.4);
        border-left: solid 1px rgba(120,120,120,0.4);
    }

    .hosting-image1, .hosting-image2, .hosting-image3 {
        width: 100%;
        height: 6.55rem;
        background-size: cover !important;
    }

    .hosting-heading, .hosting-paragraph {
        font-size: 14px;
        width: 85%;
        margin-left: 1rem;
    }

    .hosting-heading {
        padding-top: 0.5rem;
    }
    
    .hosting-paragraph {
        padding-bottom: 0.5rem;
    }

    .hosting-image1 {
        background: url('img/489faa5d-9519-48fa-aa0e-fe9673165e43.jpg') 0 0 no-repeat;
    }

    .hosting-image2 {
        background: url('img/b77eb430-aa14-4ceb-a832-109341f798cd.jpg') 0 0 no-repeat;
    }

    .hosting-image3 {
        background: url('img/1ad4d764-38a6-464b-8fdd-b0f3339adf2f.jpg') 0 0 no-repeat;
    }

Comments

[kei344]

（質問文は編集できます）現状のコードを質問文にコードブロックで追記してください。

[45_Shingo]

Margin: 0 autoが書かれているCSSがないのですが、中央寄せしたい要素は図で言うオレンジの範囲でしょうか。それとも青いflexboxが並んでいる範囲だけを中央寄せしたいという事でしょうか。

[退会済みユーザー]

今回中央寄せしたいのはオレンジ色の枠内です。

Answer 1

FlexBoxの部分のサイズに合わせて中央寄せしたい、ということでしょうか。
それであれば下記のようにすればできます。

    .hosting-learn-media1127 {
        display: block;
        width: 100%;
        margin-bottom: 5rem;
        text-align: center; /* ADD */
    }
    .hosting-items {
        /* display: block; */
        display: inline-block; /* ADD */
        /* width: 100%; */
        text-align: left; /* ADD */
        padding: 0 24px;
        margin: 0 auto;
    }
```**動くサンプル：**[https://jsfiddle.net/bzxaeys3/](https://jsfiddle.net/bzxaeys3/)

---

ちなみに `margin: 0 auto;` で中央に寄るのは width が 100% 未満の時だけなので、「最大幅を決めてそれ以上広がらない」というレイアウトなら max-width を指定するなどする必要があります。

Comments

[退会済みユーザー]

ありがとうございます。うまくいきました。