CSS — min-content & max-content & fit-content Nedir?
Bir HTML elemanının genişlik (width) değerini tanımlayabileceğimiz pek çok yol vardır. Örneğin:
Width değeri auto olan bir elemanı sayfada kullandığımızda, eleman yatay konumda uygun olan tüm genişlik kadar uzar.
(Örnekleri JSFiddle üzerinden paylaşıyor olacağım. Results kısmından çıktılarına bakabilirsiniz)
Burada width değerini 2 farklı şekilde belirleyebiliriz:
- Measurements değerler (100%,200px, 5rem gibi)
- Keywords (auto, min-content, max-content, fit-content)
Bir elemanın width ve height CSS özelliklerine değer atamamıza extrinsic sizing denmektedir. (auto, 100px, 100%,1rem gibi)
Bir elemana, extrinsic sizing uyguladığımızda, örneğin measurement bir değer ile genişliğini sınırlandırdığımızda, içerisindeki content’in overflow olmasına sebep olabiliriz.
Kapsayıcı elemana parent dersek;
Parent’ın içerisindeki content’in, parent’ın boyutunu belirlemesine Intrinsic sizing/value denmektedir. Keyword değerlerden min-content, max-content ve fit-content’i kullanarak intrinsic değerler atamış oluruz. Bu değerlerin her birinin ne işe yaradığıma ve overflow sorununu nasıl çözebileceğimize bir bakalım.
min-content
Bir parent elemanın width değerini min-content olarak ayarladığımızda, içerisinde bulunan child content’e göre parent genişliğinin olabildiğince küçük olmasını sağlarız.
Yukarıdaki örneğimizi düzenleyecek olursak eğer;
Yukarıdaki örneğimizde parent container’ın içerisinde bulunan content’in en uzun kelimesi, parent’ın genişliğini belirlemiş oldu.
Use Case
min-content’i figure elemanları için kullanılabiliriz.
Figure elemanı bir block-level elemandır. Block-level eleman olduğu için, eleman yatayda uygun olan tüm genişliği kapsar. Bu yüzden figure elemanının altına eklemiş olduğumuz figcaption, uygun olan genişliğe göre yatayda uzar.
Figure elemanının width özelliğine min-content değerini verdiğimizde, figcaption elemanının content’i, sadece figure elemanın genişliği kadar genişliğe sahip olabilir.
max-content
max-content tamament zıt strateji ile çalışmaktadır. Parent container’ın genişlik değeri, içindeki contentin uzunluğuna bağlıdır.. Overflow olan örnekte, parent’ın width değerine max-content değerini verelim:
Görebileceğiniz gibi parent container, içerisindeki content kadar genişlemiş oldu.
fit-content
fit-content, min-content ve max-content’te olduğu gibi container’ın width değeri, içindeki elemanın boyutuna bağlıdır.
Parent container içerisindeki content, container’a sığıyorsa width değeri max-content gibi davranır. Sayfayı küçülttüğümüz zaman parent’ın uzayabileceği uygun bir genişlik kalmadığında, width değeri auto gibi davranır. Asla uygun olmayan alanın dışına çıkmaz.
- fit-content Flexbox ve Grid için çalışmamaktadır.
min-content, max-content ve fit-content’in use case örneklerini şuradan inceleyebilirsiniz:
Bu yazının referansları:
https://blog.logrocket.com/understanding-min-content-max-content-fit-content-css/
https://courses.joshwcomeau.com/css-for-js/01-rendering-logic-1/10-widths
Umarım faydalı bir yazı olmuştur. Eksik veya yanlış olduğunu düşündüğünüz kısımları bana iletirseniz çok sevinirim :)
İletişim kanalları: Twitter — LinkedIn — Mail
Bir sonraki yazıda görüşmek üzere!
