CSS Flexbox Kullanımı

CSS Flexbox Kullanımı

Flexbox modern browser’lar tarafından tamamen desteklenen bi işte internet explorer 9 da ek prefix ile çözümler ürettiğimiz, float denilen illeti hayatımızdan kaldırıp responsive design’a yepis yeni bir soluk getiren nadide bir özelliktir. Bir framework falan değil he yanlış anlamayın; direk olarak browser’lara gömülü gelen ancak bir türlü kullanmadığımız bir özelliktir. Gelin öncelikle flexbox ile neler yapılabilir kısaca bir bakalım

Flexbox ile neler yapılabilir?

Flexbox ile display: block; width: 100%; float: left; şeklinde yazdığımız 3 satırlık kodu tek satıra indirip arkanıza yaslanabilirsiniz. Bir çok açıdan sizlere kolaylık sağlayan flexbox’ın en temel özelliği içeriğin hizalanması üzerine kuruludur. Örneğin temel olarak bir metni yatayda ve dikeyde hizalamak istediğiniz zaman iki şey yaparsınız: 1. si text-align: center ve de ikincisi ise; metnin bulunduğu container’ın display özelliğini table-cell yapıp vertical-align: middle yaparsınız oluverir. Omen tonreeem altı üstü ortalansın istiyorum ama daha olmaz mı? Olur bal gibi de olur bunun için tek yapmanız gereken şey container’a display: flex yazmanız. ve sonra metnin stiline ise justify-content: center yazmanız. Geçmiş olsun. Sağa mı dayayacaksınız hop anında justify-content ile lapsss diye ortalığı kasıp kavurursunuz. Ya da kendi grid yapınızı mı geliştirmek istiyorsunuz? Aynı bootstrap’teki gibi gridleri % vermekle uğraşmaktansa direk olarak ekranın %20 lik kısmını şu div alsın %30 luk kısmını şu div alsın mı diyorsunuz? flex-grow ile bu mümkün. hem de şaşıracağınız kadar süratli ve de hiç öyle “position: relative; float left; width: %20;” yazmadan direk lapsss diye display: flex; flex-grow: 1 yazarak işimizi halledeceğiz. Nasıl mı hadi biraz bakalım.

display: flex

kapsayıcı elementimize bu css attribute’ünü veriyoruz ve artık flexible box kuralları devreye girebilir.

flex-direction ile içeriği yatay ve dikey olarak yerleştirin

kapsayıcı elementimiz içerisindeki elementlerin alt alta mı yan yana mı görüntüleneceğini, aynı zamanda düz mü yoksa ters mi sıralanacağını belirlediğimiz özelliktir.

flex-direction: column; içerikleri dikey olarak yukarıdan aşağıya yerleştirmenize yardımcı olur.

flex-direction: column-reverse; içerikleri dikey olarak aşağıdan yukarıya yerleştirmenize yardımcı olur.

flex-direction: row; içerikleri yatay olarak soldan sağa yerleştirmenize yardımcı olur.

flex-direction: row-reverse; içerikleri yatay olarak sağdan sola yerleştirmenize yardımcı olur.

flex-wrap ile sığmayan içeriği alta atın

flex-wrap: wrap; özelliği içeriğinizin ekran küçüldükçe alta geçmesine olanak sağlar.

flex-wrap: nowrap; özelliği ise ekran küçülse de içeriğiniz aynı hizada kalır ve eni küçülür alta geçmez.

flex-wrap: wrap-inverse içeriği tersten sıralar ve aynı zamanda sığmayan elementin alta geçmesini sağlar.

flex-flow ile direction ve wrap’i tek seferde yazın

flex-direction ve flex-wrap özelliklerini tek seferde kullanabileceğiniz kısa kullanım şeklidir.

flex-flow: row wrap; şeklinde kullanarak içeriği yan yana ve de ekrana sığmadığında alt satıra geçecek şekilde görüntüleyin.

justify-content yatayda hizalamanın dibi dibi, adam adam!

justify-content: center; direk olarak benzetmek gibi olmasın ama text-align-center gibi düşünün ama text’i değil direk elementi container’ın ortasına getirir pammıh gibi hissettirir.

justify-content: flex-start; container’ın başladığı yere hizalama yapar.

justify-content: flex-end; container’ın bittiği yere hizalama yapar.

justify-content: space-around: öğelerin öncesi ve sonrasına boşluklar koyarak simetrik hizalama yapar.

justify-content: space-between; simetrik hizalama yapar ancak öncesi ve sonrasında boşluklar olmaz. direk container’ın sınırlarına dayanır ilk ve son elementler.

align-items dikeyde hizalamanın dibi dibi, adam adam!

align-items: center; tıpkı vertical-align: middle gibi düşünün. ancak bunun için öğenin stilini tablo hücresidir diye belirtmenize gerek yok lappps yapıştır.

align-items: flex-start: container’ın başladığı yere dikeyde hizalama yapar.

align-items: flex-end; container’ın bittiği yere dikeyde hizalama yapar.

align-items: stretch; container’ı yukarıdan aşağı boydan boya kapsar.

align-items: baseline; yazıların altını hiza kabul eder ve ona göre hizlar.

align-content hadi içeriği de hizalayalım

justify-content misali ancak container’ın içerisindeki elementleri dikeyde hizalamanıza olanak sağlar.

align-content: space-between;

Kusursuz Hizalama

Hepimizin istediği o tam olarak ortasında diyebildiğimiz hizalamayı flexbox ile yapmamız çok kolay nasıl mı? justify-content: center; align-items: center; yazmamız yeterli.

Flex Items

order ile yok artık anasının gözü le’bron james!

order property’si ile item’ları sıralayabiliriz. kullanımı ise oldukça basit

order: 1;

evet işte bu kadar!

flex-grow ile grid yapısını arkanızda bırakın edin!

nasıl ki bootstrap üzerinde kod yazarken col-md-2 col-md-8 col-md-2 şeklinde belirtip grid’i 12 ye tamamlayarak işlem yapıyoruz. flex-grow’da tam olarak yüzde gibi çalışıyor; bulunduğu ekranda genişlik değerini kapsamasını sağlıyor. Örneğin flex-grow: 1 flex-grow: 1 ve flex-grow:10 derseniz ekranı 12 parçaya bölmüş ve de 1, 1, 10 şeklinde gride ayırmış olursunuz. Mükemmel bir özellik!

flex-shrink

flex-grow’un tam tersi kullanıma sahiptir.

flex-basis ile başlangıç uzunluğu verin

 

evet bu yazımızda flexbox’un velinimetlerinden bahsettik umarım yardımcı olmuştur. Kalın sağlıcakla.

Erel Çolak

Front-End Developer olarak kendimi geliştiriyorum, HTML5, CSS3, JQuery, Bootstrap Gibi bir çok dille ilgilenmekteyim. WordPress, vBulletin, OpenCart, Moodle ve diğer CMS' ler konusunda aşırı bilgi sahibiyim ve de bu bilgileri elimden geldiğince paylaşıyorum. Trakya Üniversitesi Bilgisayar Öğretmenliği Bölümünü okudum. Şimdilerde özel bir şirkette UI/UX Designer & Front-end developer olarak çalışmaktayım.

You may also like...

Bir cevap yazın