Ich verwende flexbox, um zwei Container in einem verkleinerten übergeordneten Container anzuzeigen.

• Wenn der übergeordnete Container groß genug ist, dass die beiden div nebeneinander stehen, möchte ich, dass sie so weit wie möglich voneinander entfernt erscheinen.
• Wenn das übergeordnete Element div 缩小并且第二个 div verkleinert und das zweite
umbrochen wird, möchte ich, dass sie horizontal zentriert angezeigt werden.

justify-content: space- Between ，这有助于它们尽可能远离地显示，但当第二个 divDerzeit verwende ich justify-content: space- Between für den übergeordneten Container, was dafür sorgt, dass sie so weit wie möglich voneinander entfernt erscheinen, sie aber nicht zentriert, wenn der zweite

umgebrochen wird.

div 上使用 justify-content: space- BetweenSo sieht die aktuelle Lösung mit justify-content: space- Between auf dem übergeordneten Element aus

:

Wenn das übergeordnete Div breiter ist, wird es wie erwartet angezeigt

Wenn das übergeordnete Div schmaler ist, wird es umbrochen, aber beide werden linksbündig statt zentriert ausgerichtet

Idealerweise sollte es so aussehen:

Wenn das übergeordnete Div breiter ist, maximiert es den Abstand zwischen ihnen

Wenn das übergeordnete Div schmaler ist, werden die beiden Divs horizontal zentriert

flexbox 中完成，但可以使用 grid 完成，假设两个孩子 divs 是固定宽度，但在我的情况下，孩子们的 widthIch habe verschiedene CSS-Tricks ausprobiert, aber eine wesentliche Einschränkung dieses Problems besteht darin, dass es mit reinem CSS und nicht mit einem externen Framework wie React durchgeführt werden muss. Ich habe das SO vor 6 Jahren gefunden und es ging um etwas Ähnliches und darum, dass es in

nicht gemacht werden kann, aber mit grid gemacht werden kann, vorausgesetzt, die beiden untergeordneten

s haben eine feste Breite, aber in In meinem In diesem Fall wurden die Breites der Kinder nicht festgelegt.

Hier ist eine einfacher zu lesende Version meines Codes:

    #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>

Wichtiger Hinweis🎜: Ich kann Eigenschaften nur direkt am HTML-Objekt angeben. Ich habe keine CSS-Datei zum Erstellen der Klassen, weshalb ich im Code-Snippet IDs verwende, da dies im Wesentlichen die Grenze meiner Möglichkeiten darstellt. Ich erstelle einen HTML-String, der vom Backend an das Frontend übergeben und dort angezeigt wird. Ich weiß, dass dies keine bewährte Vorgehensweise oder gar eine gute Vorgehensweise ist, aber das ist die technische Beschränkung des Problems. 🎜

.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...