Flex'e gap desteği geldi

10 Ağustos 2020

CSS grid ile gelen ögeler arasında boşluk verme özelliği(grid-gap) flex özelliğine de geldi. Çok yerinde bir geliştirme. Daha önce eksi margin ve farklı yöntemlerle çözmeye çalıştığımız bu işi tek bir tanım ile çözmek süper. Tabi grid-gap olarak standartlaşan yapı genele yayıdığı için artık gap olarak yoluna devam edecek.

Şu an Firefox (63+) ve Chrome 84 destekliyor. Safari’ye de destek gelirse değme keyfimize.

Hemen bir örnek üzerinde test edelim.

Görüldüğü gibi gap değeri sadece yatayda değil yatayda (column-gap) ve dikeyde (row-gap) tanımlanabiliyor. gap tanımı yatay ve dikey için ortak değer olduğunda kısaltma olarak kullanılabilir.

Çoklu kolon’a da gap desteği geldi. Çok fazla kullanmasam CSS3 Çoklu Kolonlara da gap desteği gelmiş olması sevindirici. Daha önce column-gap olarak kullandığımız değer artık gap oldu.

Kalın sağlıcakla.

Kaynaklar

  • https://web.dev/flexbox-gap/
  • https://developer.mozilla.org/en-US/docs/Web/CSS/gap
  • https://medium.com/@schofeld/mind-the-flex-gap-c9cd1b4b35d8
  • https://coryrylan.com/blog/css-gap-space-with-flexbox (Eski yöntem)
  • https://caniuse.com/#feat=flexbox-gap
  • https://www.bram.us/2020/05/12/spacing-grid-flexbox-items-in-css-with-the-gap-property/

Evden çalışma ve çalışma ortamım

Evden çalışma ve çalışma ortamım hakkında bilgilendirme Devamını oku

Telefonu bilgisayarın web kamerası olarak tanımlamak

07 May 2020 tarihinde yayınlandı.

Sublime Text'ten Visual Studio Code'a geçiş

05 February 2020 tarihinde yayınlandı.