Bagaimana untuk Menambah Margin 1px pada Item Fleksibel dengan `flex: 0 0 25%`?

Menambah Margin 1px pada Item Fleksibel dengan flex: 0 0 25%

Apabila bekerja dengan susun atur fleksibel, mungkin wajar untuk menambah jidar kecil, seperti 1px, untuk melenturkan item. Walau bagaimanapun, flexbox sememangnya tidak membenarkan nilai pecahan sebagai margin.

Untuk item flex yang ditakrifkan menggunakan flex: 0 0 25%, menambah margin 1px secara langsung tidak boleh dilakukan. Ini kerana asas-flex ditetapkan kepada 25%, tidak meninggalkan ruang tersedia untuk margin.

Penyelesaian:

Untuk mencapai margin 1px dalam senario ini, memanfaatkan sifat flex-grow:

flex: 1 0 22%;

• flex: 1: The flex-grow membenarkan elemen berkembang melebihi asas-flex yang ditentukan.
• 0: flex-shrink ditetapkan kepada 0 untuk memastikan elemen tidak akan mengecut di bawah asas-flexnya.
• 22%: asas fleksibel dikurangkan kepada 22% untuk mengambil kira margin 1px yang dikehendaki pada setiap sisi (2/11 = 0.19% setiap sisi, yang apabila ditambah sehingga 22% menghasilkan 25%).

Dengan mengurangkan asas-flex dan meningkatkan flex-grow, elemen akan mempunyai margin yang dikehendaki sambil mengekalkan perkadaran yang ditetapkan .

Contoh:

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

<div>

Atas ialah kandungan terperinci Bagaimana untuk Menambah Margin 1px pada Item Fleksibel dengan `flex: 0 0 25%`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!