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 1

justify-kandungan:ruang-antara;

Answer 2

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;
}

<p class="container">
  <p class="item"></p>
  <p class="item"></p>
  <p class="item"></p>
  <p class="item"></p>
  <p class="item"></p>
</p>

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

Answer 3

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

Answer 4

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;