Bagaimanakah saya boleh memaksimumkan ruang antara div dalam baris yang sama tetapi memusatkannya jika ia unik?

Question

Saya menggunakan flexbox untuk memaparkan dua bekas di dalam bekas induk yang mengecut.

• Apabila bekas induk cukup besar sehingga kedua-duanya div bersebelahan, saya mahu mereka kelihatan berjauhan.
• Apabila ibu bapa div 缩小并且第二个 div mengecut dan
kedua membalut, saya mahu mereka kelihatan berpusat secara mendatar.

justify-content: space- Between ，这有助于它们尽可能远离地显示，但当第二个 divPada masa ini, saya menggunakan justify-content: space- Between pada bekas induk, yang membantu mereka muncul sejauh mungkin, tetapi tidak memusatkannya apabila bekas

kedua membungkus.

div 上使用 justify-content: space- BetweenBeginilah rupa penyelesaian semasa menggunakan justify-content: space- Between pada induk

:

Apabila div induk lebih luas, ia dipaparkan seperti yang dijangkakan

Apabila div induk lebih sempit, ia membalut, tetapi kedua-duanya dijajar ke kiri dan bukannya berpusat

Sebaik-baiknya, ia sepatutnya kelihatan seperti ini:

Apabila div induk lebih luas, ia memaksimumkan ruang antara mereka

Apabila div induk lebih sempit, ia akan memusatkan dua div secara mendatar

flexbox 中完成，但可以使用 grid 完成，假设两个孩子 divs 是固定宽度，但在我的情况下，孩子们的 widthSaya telah mencuba pelbagai helah CSS, tetapi had utama masalah ini ialah ia perlu dilakukan menggunakan CSS tulen, bukan menggunakan rangka kerja luaran seperti React. Saya dapati ini SO 6 tahun yang lalu dan ia bercakap tentang sesuatu yang serupa dan bagaimana ia tidak boleh dilakukan dalam

tetapi boleh dilakukan menggunakan grid dengan mengandaikan dua kanak-kanak

s adalah lebar tetap tetapi dalam In my kes, lebarkanak-kanak tidak ditetapkan.

Berikut ialah versi kod saya yang lebih mudah dibaca:

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

Nota penting🎜: Saya hanya boleh menentukan sifat secara langsung pada objek HTML. Saya tidak mempunyai fail CSS untuk mencipta kelas, itulah sebabnya dalam coretan kod saya menggunakan ID, kerana itu pada asasnya had apa yang boleh saya lakukan. Saya sedang membina rentetan HTML untuk dihantar dari bahagian belakang ke bahagian hadapan dan dipaparkan di sana. Saya tahu ini bukan amalan terbaik atau amalan baik, tetapi itulah had teknikal masalahnya. 🎜

Answer 1

Jadi, berdasarkan imej yang anda siarkan, saya mengandaikan anda menggunakan pertanyaan @media dalam CSS anda untuk membuat kanak-kanak membalut pada skrin yang lebih kecil. Jika ya, cuba yang berikut:

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