CSS'te Kenar Boşluklarıyla Flex Elemanlarını Ebeveyne Hizalama

justify-content özelliğindeki space-around değeri, ilk ve son flex elemanlarına ebeveynden kenar boşluğu ayarlar.

İlk bakışta, elemanlar arasındaki mesafe ile uç elemanlar ve ebeveyn arasındaki mesafenin eşit olacağı sanılabilir, ancak durum böyle değildir - elemanlar arasındaki mesafe, ebeveyn ile uç eleman arasındaki mesafeden 2 kat daha fazla olacaktır.

Bir örnek üzerinde inceleyelim:

css.parent {
  display: flex;
  justify-content: space-around;
}

Kodun çalıştırılma sonucu: