Bagaimana untuk Mencapai Jarak 1px Antara Item Flex dalam Galeri Imej?

Cara Melaraskan Jarak dalam Galeri Imej Item Flex dengan Margin

Dalam susun atur flexbox, item dengan nilai flex '0 0 25%' mempunyai lebar tetap dan tidak mengecut atau membesar. Untuk menambah ruang antara item ini sambil mengekalkan struktur seperti grid, margin boleh digunakan. Walau bagaimanapun, penggunaan margin 1% menghasilkan jurang yang mungkin terlalu besar.

Untuk mencapai margin 1px, gunakan nilai flex '1 0 22%'. Ini menetapkan asas-flex kepada 22%, memastikan bahawa terdapat hanya empat item setiap baris. Nilai flex-grow ditetapkan kepada 1, membolehkan item berkembang dan mengisi ruang yang tinggal di tepi. Ini mewujudkan jurang 1px yang halus antara item.

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 22%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
}

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Jarak 1px Antara Item Flex dalam Galeri Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!