CSS Flexbox Nedir, Nasıl Kullanılır? | Webmaster.Kitchen

Trang chủ » Html Display Flex Nedir » CSS Flexbox Nedir, Nasıl Kullanılır? | Webmaster.Kitchen

Có thể bạn quan tâm

Cuma 19 Aralık 2025 Hakkında Yazarlarımız Reklam Künye İletişim Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı X
  1. Anasayfa
  2. Arayüz
  3. CSS Flexbox Nedir, Nasıl Kullanılır?
CSS Flexbox Nedir, Nasıl Kullanılır?CSS Flexbox Nedir, Nasıl Kullanılır? Yazar : Bilal UÇAR 11 Kasım 2018 4 Comments

Flex özellikle karmaşık projelerde web geliştiricilerinin işini kolaylaştıran, web sitesindeki elamanları yatayda ve dikeyde hizalamaya yarayan ve günümüzde oldukça popüler olan CSS layoutlarından biridir.

Neden Flexbox?

  • Flex ile esnek bir yapı kurarak tasarladığınız siteyi responsive yapmanız çok daha kolaydır.
  • Dikeyde ortalama flex yapısıyla çok kolaydır.
  • Elemanların genişliğini ve yüksekliğini kolayca boyutlandırabilirsiniz.
  • Günümüzde tüm güncel tarayıcılar tarafından desteklenmektedir.
Flexbox ‘un tarayıcı desteği tablosu

Flexbox Nasıl Kullanılır?

Flexbox’a başlamak için önce flex konteynere ihtiyacımız vardır.

.flex-container { display: flex; }

Bu makalede bahsedeceğimiz flex özellikleri:

  • justify-content
  • align-items
  • flex-direction
  • flex-wrap
  • flex-flow
  • align-content
  • order

justify-content Özelliği

justify-content Özelliği içindeki elemanların X ekseninde yani yatayda hizalamaya yarar. Şu değerleri alabilir:

  • flex-start: Öğeleri flexbox container’ın sol tarafına hizalar.
  • flex-end: Öğeleri flexbox container’ın sağ tarafına hizalar.
  • center: Öğeleri flexbox container’ın ortasına hizalar.
  • space-between: Öğeler eşit aralıklarla yatay şekilde yayılır
  • space-around: Öğeler etraflarında eşit aralıklar olacak şekilde yatay şekilde yayılır
.flex-container { display: flex; justify-content: center; }
justify-content: center özelliği öğeleri yatayda ortalar.

align-items Özelliği

align-items Özelliği içindeki elemanların Y ekseninde yani dikeyde hizalamaya yarar. Şu değerleri alabilir:

  • flex-start: Öğeleri flexbox container’ın tepesine hizalar
  • flex-end: Öğeleri flexbox container’ın aşağısına hizalar
  • center: Öğeleri flexbox container’ın dikey ortasına hizalar
  • baseline: Öğeleri flexbox container’ın yazı referans çizgisine(baseline) hizalar
  • stretch: Öğeler flexbox container boyunca uzarlar
.flex-container { display: flex; align-items: center; }
align-items: center özelliği öğeleri dikeyde ortalar.

flex-direction Özelliği

flex-direction özelliği öğelerin hangi yönde yerleştireleceğini belirler. Şu değerleri alabilir:

  • row: Öğeler yazı yönü ile aynı yönde yerleştirilir.
  • row-reverse: Öğeler yazı yönünün tersi yönünde yerleştirilir.
  • column: Öğeler yukarıdan aşağıya doğru yerleştirilir.
  • column-reverse: Öğeler aşağıdan yukarıya doğru yerleştirilir.
.flex-container { display: flex; flex-direction: column; }
flex-direction: column özelliği öğeleri yukarıdan aşağıya sıralamaya yarar.

flex-wrap Özelliği

flex-wrap özelliği birden fazla satırda gösterilecek öğelerin nasıl bir davranış sergileyeceğini belirlemek için kullanılır. Şu değerleri alabilir:

  • nowrap: Tüm öğeler tek satıra sığar.
  • wrap: Öğeler satırlara bölünür.
  • wrap-reverse: Öğeler satırlara ters sırada bölünür.
.flex-container { display: flex; flex-wrap: wrap; }
flex-wrap: wrap özelliği öğeleri birden fazla satıra böler.

flex-flow Özelliği

flex-direction ve flex-wrap kuralları, flex-flow kısa yazım kuralı ile birlikte yazılabilirler. Bu kısa yazım kuralı, iki kuralın değerlerini aralarında boşluk ile birlikte alır. Bu kısa yazım kuralı, iki kuralın değerlerini aralarında boşluk ile birlikte alır.

.flex-container { display: flex; flex-flow: row wrap; }
flex-flow: row wrap özelliği öğeleri hem satır düzeninde hem de sığmayan elemanları bir alt satıra atmayı sağlar.

align-content Özelliği

align-content kuralı ile satırları birbirinden ayırabilirsiniz. Bu kural şu değerleri alır:

  • flex-start: Satırlar flex container’ın tepesinde toplanır.
  • flex-end: Satırlar flex container’ın aşağısında toplanır.
  • center: Satırlar flex container’ın dikey ortasında toplanır.
  • space-between: Satırlar aralarında eşit boşluk kalacak şekilde yayılırlar.
  • space-around: Satırlar etraflarında eşit boşluk kalacak şekilde yayılırlar.
  • stretch: Satırlar flex container’ı kaplamak için uzarlar.
.flex-container { display: flex; flex-wrap: wrap; align-content: space-between; }

Bu kafa karıştırıcı olabilir, ama align-content satırlar için aralıkları belirlerken, align-items öğelerin flex container içerisinde beraberce nasıl hizalanacağını belirler. Eğer tek satır varsa, align-content kuralının bir etkisi yoktur.

align-content: space-between özelliği satırların arasında eşit boşluk kalacak şekilde genişletir.

order Özelliği

Bazen row ya da column yerleşimini tersine çevirmek yeterli olmaz. Bu gibi durumlarda order kuralı ile öğeleri tek tek sıralandırabiliriz. Öğelerin başlangıç sıra değeri 0’dır, ama biz bu değeri pozitif ya da negatif bir değere eşitleyebiliriz.

<div class="flex-container"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div>
order özelliği öğeleri manuel sıralamaya yarar.

Flex modeliyle karmaşık sayfaları tasarlamak kolaylaşıyor. Eğer daha önceden denemediyseniz en kısa sürede denemelisiniz. Hatta bilgiler tazeyken pratik yapmanız için Flexbox Froggy oyununu oynamanızı tavsiye ederim.

Kaynak : https://www.w3schools.com/css/css3_flexbox.asp

Etiketler: css flexbox flexbox nasıl kullanılır flexbox nedir flexbox özellikleri Önceki Yazı Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

4 Yorumlar

  • Baha KALAYCI says: 11 Kasım 2018 at 22:12

    Ellerinize sağlık, bu arada ingilizce özelliğini şimdi keşfettim çok iyi olmuş, css hakkında daha fazla yazı, kaynak bekliyoruz.

    Reply
  • Yerkyebulan says: 26 Mart 2020 at 07:04

    Merhaba,bu flexbox dersini cok begendim,Flexbox Froggy oyunu da oynadim cok iyiydi.Ellerinize saglik olsun sizin,cok tesekkurler

    Reply
  • Ekrem says: 6 Nisan 2020 at 18:34

    Oyun sayesinde cozdum bu isi. Elleriniz saglik keske her konuda oyun olsa

    Reply
  • Martin says: 2 Ekim 2020 at 11:53

    Helal olsun size. Bu oyun sayesinde mantigini anladim. Kisa ipuclari da harika oluyor. Tesekkurler

    Reply

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bir dahaki sefere yorum yaptığımda kullanılmak üzere adımı, e-posta adresimi ve web site adresimi bu tarayıcıya kaydet.

Δ

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022 Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022 Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022 Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022 Leave this field empty if you're human: © 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.

Từ khóa » Html Display Flex Nedir