css3 - Bagaimana untuk menyelaraskan elemen kanak-kanak di bawah susun atur fleksibel?

Question

Seperti yang ditunjukkan dalam gambar, saya menggunakan justify-content:space-around;, tetapi apa yang saya mahukan ialah baris kedua elemen kanak-kanak boleh dijajarkan ke atas dan ke bawah dengan baris pertama Bilangan elemen kanak-kanak tidak tetap. Bagaimana untuk menyelesaikannya?

習慣沉默 · Answer

justify-kandungan:ruang-antara;

滿天的星座 · Answer

Anda mungkin memerlukan beberapa pengiraan:

.container {
  width: 510px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
}

.item {
  width: 150px;
  height: 150px;
  background: red;
  margin: 10px;
}

Lihat dalam talian https://jsfiddle.net/zktf3oc5/

给我你的怀抱 · Answer

flex Susun atur tidak dapat mencapai kesan yang anda inginkan apabila bekas induk mempunyai lebar berubah-ubah.

世界只因有你 · Answer

Flex melaksanakan reka letak, terutamanya kerana idea anda menembusi konvensyen Jika reka letak mendatar tidak berjaya, gunakan susun atur paksi menegak, tetapkannya kepada tiga lajur, setiap lajur,
flex-direction:colomn;
justify-content:space-. sekitar;
Jumlah Gunakan tiga lajur sekali lagi
justify-content :space-around;