如何最大化同一行中 div 之間的空間，但如果它是唯一的，則將其居中？

Question

我正在使用 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 字串，從後端傳遞到前端並在那裡顯示。我知道這不是最佳實踐，甚至不是好的實踐，但這就是問題的技術限制。

Answer 1

因此，根據您發布的圖像，我假設您在 CSS 中使用 @media 查詢來讓子項目在較小的螢幕上換行。如果是這樣，請嘗試以下操作：

.main {
  width: 100%;
}

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

.child {
  width: fit-content;
  padding: 2rem;
}

.child:nth-child(odd) {
  background: lightblue;
}

.child:nth-child(even) {
  background: pink;
}

@media only screen and (max-width: 992px) {
  .parent {
    width: fit-content;
    flex-direction: column;
    margin: 0 auto;
  }
  
  .child {
    margin: 0 auto;
  }
}

  

    

      DIV 1
    
    

      Hell yeah! I'm the meanest...