Bu elementler ne işe yarıyor?

Bu kodların amacı nedir ?

• top: calc(50% - 73px); (top:10px; falan dese biliyorum da calc var ve 2 değer var onlar nedir ?)


• transform: translateX(9px);


• flex-direction: column;


• overflow: hidden;


• flex-grow: 1;


• flex-wrap: wrap;


• box-sizing: border-box;

Bunlar CSS3.
calc fonksiyonu bir div in genişliğini hesaplar. Seninkinden yola çıkalım. Genişliğin %50sini almış ve bu değerden 73px çıkarmış. Toplama da yapılabilir.
transform çevirmeye yarar. Seninkini sağa doğru 9px çevirmiş

Burada hepsi yazıyor aslında
https://www.w3schools.com/cssref/css_selectors.asp

- calc "calculator"dan gelmektedir. Hesaplama aracı. Şöyle düşün, 60x20 kutuyu dikey olarak ortalamak istediğin nesneye top:%50 dersin fakat nesnenin en üst kısmı tam ortada durur. O yüzden yüksekliğinin yarısı 10px kadar da margin-top:-10px yazarsın.
- transform: translateX(9px); x ekseninde 9px sağa atar
- flex-direction: column; nesneye tablo kolonu da davranmasını belirtir.
- overflow: hidden; kutudan taşan yerleri gösterme
- flex-grow: 1; nesneleri bir nevi katsayısı oranında dağıtmaya yarar. iki nesne düşün, birisi flex-grow:1, diğeri flex-grow:3 niteliğine sahip ise, o kutu 1'e 3 oranında pay edilir.
- flex-wrap: wrap; bunu araştırmam gerek.
- box-sizing: border-box; bunu da.