Merhaba arkadaşlar, bugün sizlerle Flexbox'ın belki de en çok kafa karıştıran özelliklerinden birini, flex kısayol özelliğini konuşacağız. Özellikle flex: 1, flex: auto ve flex: none değerlerini görünce "Hangisi ne işe yarıyor?" diye düşünüp duruyordum. İşte bu üçlüyü, basit bir layout'u mahvederek ve sonra kurtararak nasıl öğrendiğimi anlatacağım.
Kafa Karışıklığı ve İlk Senaryo
Bir kart bileşeni yapıyordum. İçinde bir başlık, bir açıklama metni ve en altta da sabit yükseklikte bir buton olacaktı. Açıklama metni değişken uzunlukta olabilirdi. İlk başta her şeye flex: 1 verip "olsun bitsin" dedim. Sonuç? Buton, metin uzadıkça aşağı kaydı ve bazen ekrana sığmadı! Kafayı yemiştim.
Sorunu anlamak için basit bir test ortamı kurdum. Üç tane div'im olsun ve hepsi display: flex bir container'ın içinde olsun istedim.
flex: none - "Benim Boyutum Belli, Dokunma!"
İlk olarak flex: none'ı test ettim. Bu değer, öğenin esnemesini tamamen engeller. Ne küçülür ne büyür. Kendi width ve height değerlerine veya içeriğinin boyutuna sadık kalır. Sanki "flexbox'ta değilmişim gibi" davranır diyebiliriz.
Bu kutuyu yanına flex: 1 verdiğim başka bir kutu koyduğumda, flex: none olan kutu 80px'inde direndi, diğer kutu ise kalan tüm alanı aldı. Logolar, sabit genişlikli butonlar veya yan menüler için biçilmiş kaftan.
flex: auto - "Esneyebilirim Ama İçeriğime Göre"
Sonra sıra flex: auto'ya geldi. Bu değer, öğenin gerektiğinde büyüyüp küçülebileceği anlamına gelir. Ancak kritik nokta şu: Başlangıç boyutunu içeriği belirler. Yani içinde yazı ne kadar uzunsa, o boyuta yakın bir yerden esnemeye başlar. flex: 1 1 auto ile aynıdır.
İçine "Çok uzun bir yazı yazdığımda ne olacak?" diye uzunca bir metin koydum. Kutu, önce o metni sığdıracak kadar genişledi, eğer container'da yer kalmazsa ancak o zaman küçülmeye başladı. Bu, input alanları veya doğal akışını korumak istediğiniz paragraflar için harika.
flex: 1 - "Kardeşlerimle Eşit Paylaşalım"
En meşhur olan flex: 1 ise aslında flex: 1 1 0%'ın kısayolu. Buradaki sihirli nokta, başlangıç boyutunun (flex-basis) "0" olması. Yani "içeriğin ne kadar yer kapladığı umurumda değil, önce tüm alanı kardeşlerimle eşit şekilde paylaşalım, sonra gerekiyorsa ona göre büyüyüp küçülelim" der.
Üç kutuya da flex: 1 verdiğimde, içlerindeki yazı ne kadar kısa veya uzun olursa olsun, container genişliğini tam olarak üç eşit parçaya böldüler. İşte bu yüzden benim kart bileşenimdeki açıklama alanına flex: 1 vermek, butonu aşağı itiyordu. Çünkü açıklama alanı "kalan tüm boş alanı" almaya çalışıyordu.
Pratik Çözüm ve Sonuç
Peki ben o kart bileşenini nasıl düzelttim? İşte benim kullandığım en temiz çözüm:
Açıklama alanına flex: auto (veya uzun haliyle flex: 1 1 auto) vererek, önce metnin doğal yüksekliğini almasını, ancak container içinde yer kaldıkça büyümesini, kalmadıkça da küçülüp scroll bar çıkarmasını sağladım. Sorun çözüldü!
Siz Flexbox'ta bu üçlü arasında hangi durumlarda hangisini tercih ediyorsunuz? Ya da "Şu projede flex: 0 1 [sayı]px gibi daha farklı bir değer kullandım" diyen var mı? Yorumlarda deneyimlerinizi paylaşın, hep birlikte öğrenelim!
Kafa Karışıklığı ve İlk SenaryoBir kart bileşeni yapıyordum. İçinde bir başlık, bir açıklama metni ve en altta da sabit yükseklikte bir buton olacaktı. Açıklama metni değişken uzunlukta olabilirdi. İlk başta her şeye flex: 1 verip "olsun bitsin" dedim. Sonuç? Buton, metin uzadıkça aşağı kaydı ve bazen ekrana sığmadı! Kafayı yemiştim.
Sorunu anlamak için basit bir test ortamı kurdum. Üç tane div'im olsun ve hepsi display: flex bir container'ın içinde olsun istedim.
CSS:
.flex-container {
display: flex;
width: 500px;
height: 200px;
border: 2px solid #3498db;
padding: 10px;
gap: 10px;
}
.box {
padding: 15px;
border-radius: 5px;
color: white;
font-weight: bold;
min-width: 50px; / İçerik çok küçük olsa bile /
}İlk olarak flex: none'ı test ettim. Bu değer, öğenin esnemesini tamamen engeller. Ne küçülür ne büyür. Kendi width ve height değerlerine veya içeriğinin boyutuna sadık kalır. Sanki "flexbox'ta değilmişim gibi" davranır diyebiliriz.
CSS:
.box-none {
flex: none; / flex: 0 0 auto ile aynı /
background-color: #e74c3c;
width: 80px; / Bu değer sabit kalacak /
}Bu kutuyu yanına flex: 1 verdiğim başka bir kutu koyduğumda, flex: none olan kutu 80px'inde direndi, diğer kutu ise kalan tüm alanı aldı. Logolar, sabit genişlikli butonlar veya yan menüler için biçilmiş kaftan.
flex: auto - "Esneyebilirim Ama İçeriğime Göre"Sonra sıra flex: auto'ya geldi. Bu değer, öğenin gerektiğinde büyüyüp küçülebileceği anlamına gelir. Ancak kritik nokta şu: Başlangıç boyutunu içeriği belirler. Yani içinde yazı ne kadar uzunsa, o boyuta yakın bir yerden esnemeye başlar. flex: 1 1 auto ile aynıdır.
CSS:
.box-auto {
flex: auto; / flex: 1 1 auto ile aynı /
background-color: #2ecc71;
}İçine "Çok uzun bir yazı yazdığımda ne olacak?" diye uzunca bir metin koydum. Kutu, önce o metni sığdıracak kadar genişledi, eğer container'da yer kalmazsa ancak o zaman küçülmeye başladı. Bu, input alanları veya doğal akışını korumak istediğiniz paragraflar için harika.
flex: 1 - "Kardeşlerimle Eşit Paylaşalım"En meşhur olan flex: 1 ise aslında flex: 1 1 0%'ın kısayolu. Buradaki sihirli nokta, başlangıç boyutunun (flex-basis) "0" olması. Yani "içeriğin ne kadar yer kapladığı umurumda değil, önce tüm alanı kardeşlerimle eşit şekilde paylaşalım, sonra gerekiyorsa ona göre büyüyüp küçülelim" der.
CSS:
.box-one {
flex: 1; / flex: 1 1 0% ile aynı /
background-color: #9b59b6;
}Üç kutuya da flex: 1 verdiğimde, içlerindeki yazı ne kadar kısa veya uzun olursa olsun, container genişliğini tam olarak üç eşit parçaya böldüler. İşte bu yüzden benim kart bileşenimdeki açıklama alanına flex: 1 vermek, butonu aşağı itiyordu. Çünkü açıklama alanı "kalan tüm boş alanı" almaya çalışıyordu.
Pratik Çözüm ve SonuçPeki ben o kart bileşenini nasıl düzelttim? İşte benim kullandığım en temiz çözüm:
CSS:
.card {
display: flex;
flex-direction: column;
height: 300px;
}
.card-title {
flex: none; / Başlık sabit kalsın /
}
.card-description {
flex: 1 1 auto; / AUTO! Önce içeriğine göre boyut al, sonra esne /
overflow-y: auto; / Taşarsa scroll /
}
.card-button {
flex: none; / Buton sabit kalsın /
}Açıklama alanına flex: auto (veya uzun haliyle flex: 1 1 auto) vererek, önce metnin doğal yüksekliğini almasını, ancak container içinde yer kaldıkça büyümesini, kalmadıkça da küçülüp scroll bar çıkarmasını sağladım. Sorun çözüldü!
Siz Flexbox'ta bu üçlü arasında hangi durumlarda hangisini tercih ediyorsunuz? Ya da "Şu projede flex: 0 1 [sayı]px gibi daha farklı bir değer kullandım" diyen var mı? Yorumlarda deneyimlerinizi paylaşın, hep birlikte öğrenelim!