我正在使用 flexbox 在縮小的父容器中顯示兩個容器。

• 當父容器足夠大，使得兩個 div 並排時，我希望它們顯示得盡可能遠。
• 當父級 div 縮小並且第二個 div 換行時，我希望它們水平居中顯示。

目前，我在父容器上使用justify-content: space- Between ，這有助於它們盡可能遠離地顯示，但當第二個div 換行時，不會使它們居中。

這就是目前在父級 div 上使用 justify-content: space- Between 的解決方案的樣子：

當父 div 較寬時，它會如預期顯示

當父 div 較窄時，它會換行，但兩者都是左對齊而不是居中

理想情況下，它應該是這樣的：

當父 div 較寬時，它會最大化它們之間的空間

當父 div 較窄時，它會將兩個 div 水平居中

我嘗試過各種 CSS 技巧，但這個問題的一個關鍵限制是它必須使用純 CSS 來完成，不能使用像 React 這樣的外部框架。我在6年前發現這個SO，它正在談論類似的事情，以及它如何不能在flexbox 中完成，但可以使用grid 完成，假設兩個孩子 divs 是固定寬度，但在我的情況下，孩子們的widths 不固定.

這是我的程式碼的易於閱讀的版本：

    #main {
        font-size: 50px;
        padding: 10px;
    }

    #parent {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    #child1 {
        background: #FFFFD0;
    }

    #child2 {
        background: #FFD0FF;
    }

    <div id="main">
        <div id="parent">
            <div id="child1">
                Div #1
            </div>
            <div id="child2">
                Div #2
            </div>
        </div>
    </div>

重要說明：我只能直接在 HTML 物件上指定屬性。我沒有用於創建類別的 CSS 文件，這就是為什麼在程式碼片段中我使用 ID，因為這本質上是我能做的事情的限制。我正在建立一個 HTML 字串，從後端傳遞到前端並在那裡顯示。我知道這不是最佳實踐，甚至不是好的實踐，但這就是問題的技術限制。