Comment puis-je maximiser l'espace entre les divs dans la même ligne mais le centrer s'il est unique ?

Question

J'utilise flexbox pour afficher deux conteneurs à l'intérieur d'un conteneur parent rétréci.

• Lorsque le conteneur parent est suffisamment grand pour que les deux div soient côte à côte, je veux qu'ils apparaissent aussi éloignés que possible.
• Lorsque le parent div 缩小并且第二个 div rétrécit et que le second
s'enroule, je veux qu'ils apparaissent centrés horizontalement.

justify-content: space- Between ，这有助于它们尽可能远离地显示，但当第二个 divActuellement, j'utilise justify-content: space- Between sur le conteneur parent, ce qui les aide à apparaître aussi éloignés que possible, mais ne les centre pas lorsque le second

se termine.

div 上使用 justify-content: space- BetweenVoici à quoi ressemble la solution actuelle utilisant justify-content: space- Between sur le parent

 :

Lorsque le div parent est plus large, il s'affiche comme prévu

Lorsque le div parent est plus étroit, il s'enroule, mais les deux sont alignés à gauche au lieu d'être centrés

Idéalement, cela devrait ressembler à ceci :

Lorsque le div parent est plus large, cela maximise l'espace entre eux

Lorsque le div parent est plus étroit, il centrera les deux divs horizontalement

flexbox 中完成，但可以使用 grid 完成，假设两个孩子 divs 是固定宽度，但在我的情况下，孩子们的 widthJ'ai essayé diverses astuces CSS, mais l'une des principales limites de ce problème est qu'il doit être réalisé en utilisant du CSS pur, et non en utilisant un framework externe comme React. J'ai trouvé ceci SO il y a 6 ans et il parlait de quelque chose de similaire et du fait que cela ne peut pas être fait en

mais peut être fait en utilisant grid en supposant que les deux enfants

ont une largeur fixe mais dans Dans mon Dans ce cas, les largeurs des enfants n'étaient pas corrigées.

Voici une version plus facile à lire de mon code :

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

Remarque importante🎜 : Je ne peux spécifier des propriétés que directement sur l'objet HTML. Je n'ai pas de fichier CSS pour créer les classes, c'est pourquoi dans l'extrait de code j'utilise des identifiants, car c'est essentiellement la limite de ce que je peux faire. Je construis une chaîne HTML à transmettre du backend au frontend et à y afficher. Je sais que ce n'est pas une bonne pratique ni même une bonne pratique, mais c'est la limite technique du problème. 🎜

Answer 1

Donc, d'après l'image que vous avez publiée, je suppose que vous utilisez la requête @media dans votre CSS pour que les enfants s'enroulent sur des écrans plus petits. Si tel est le cas, essayez ce qui suit :

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