Mükemmel Flexbox Düzenleri Oluşturun

Sezgisel sürükle ve bırak arayüzümüzle CSS flexbox kodunu görselleştirin, özelleştirin ve oluşturun.

Konteyner Özellikleri

display

flex-direction

flex-wrap

justify-content

align-items

align-content

Öğe Özellikleri

Items

3 items

Seçili Öğe

flex-grow

flex-shrink

flex-basis

order

align-self

Preview

Item 1

Item 2

Item 3

.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

Oluşturulan CSS kodu

Popüler Flexbox Ön Ayarları

Yatay ve Dikey Olarak Ortalayın

Content

Bir logoyu, düğmeyi veya herhangi bir öğeyi hem yatay hem de dikey olarak ortalamak için mükemmeldir.

Eşit Aralık

Item 1

Item 2

Item 3

Aralarında boşluk veya boşluk ile öğeler arasında eşit aralık oluşturun.

Dikey Menü

Home

About

Contact

Tutarlı aralık ve hizalama ile dikey bir gezinme menüsü oluşturun.

Duyarlı Izgara

Box 1

Box 2

Box 3

Box 4

Box 5

Öğeleri kullanılabilir alana göre kaydıran dinamik bir ızgara düzeni oluşturun.

Kahraman Sancağı

Ana Başlık

Harekete geçirici mesaj içeren kahraman bölümü

Başlık, altyazı ve harekete geçirici mesaj düğmesi içeren bir kahraman afişi tasarlayın.

Altbilgi Düzeni

Company

About Us

Careers

Support

Yardım Merkezi

Bize Ulaşın

Daha küçük ekranlarda yığılan sütunlarla duyarlı bir altbilgi oluşturun.

Gerçek Dünyadan Örnekler

Gezinti Çubuğu

Logo

Home

Products

About

Contact

Solda logo, ortada menü öğeleri ve sağda alışveriş sepeti simgesi bulunan ortak bir gezinme çubuğu düzeni.

Card Grid

Kart Başlığı

Kart açıklama metni burada

Kart Başlığı

Kart açıklama metni burada

Kart Başlığı

Kart açıklama metni burada

Flexbox özelliklerini kullanarak farklı ekran boyutlarına uyum sağlayan duyarlı bir kart ızgarası.

Makale Düzeni

Makale Adı

Kategori Ocak 1, 2023 · Okuma süresi: 5 dk

Makale içeriği burada. Bu kısa bir özet veya tam makale metni olabilir. Flexbox, görüntüyü ve metni görsel olarak çekici bir şekilde hizalamaya yardımcı olur.

Solda bir resim ve sağda metin içeriği bulunan, mobil cihazlarda yığılmış yaygın bir makale düzeni.

Pano Düzeni

Header

Sidebar

Ana İçerik

Footer

Hem yatay hem de dikey hizalama için flexbox kullanan üstbilgi, kenar çubuğu, ana içerik alanı ve altbilgi içeren bir pano düzeni.

Flexbox Temelleri

Flexbox nedir?

Yaygın olarak Flexbox olarak bilinen Esnek Kutu Düzeni, boyutları bilinmediğinde veya dinamik olsa bile bir kapsayıcıdaki öğeler arasında alanı dağıtmak ve hizalamak için verimli bir yol sağlayan bir CSS3 düzen modelidir.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Anahtar Kavramlar:Flexbox iki ana kavram sunar:esnek konteyner and the Flex Öğeleri. Kapsayıcı üst öğedir ve öğeler onun doğrudan alt öğeleridir.

Ana Eksen vs Çapraz Eksen

Flexbox düzenleri iki eksene dayanır:main axis and the çapraz eksen.

Ana eksen:Esnek öğelerin yerleştirildiği birincil eksen. Tarafından tanımlanmıştırflex-direction.
Çapraz eksen:Ana eksene dik eksen. Yönü ana eksen yönüne bağlıdır.

Ana Eksen →

← Çapraz Eksen

Start

Main

End

Konteyner Özellikleri

Property	Description
`display`	Esnek bir kabı tanımlar; Verilen değere bağlı olarak satır içi veya blok.
`flex-direction`	Ana ekseni belirler, böylece esnek öğelerin esnek kabın içine yerleştirilme yönünü tanımlar.
`flex-wrap`	Varsayılan olarak, esnek öğelerin tümü tek bir satıra sığmaya çalışır. Bunu değiştirebilir ve bu özellik ile öğelerin gerektiği gibi kaydırılmasına izin verebilirsiniz.
`justify-content`	Esnek öğeleri, esnek kabın geçerli çizgisinin ana ekseni boyunca hizalar.
`align-items`	Esnek öğeleri, esnek kabın geçerli çizgisinin çapraz ekseni boyunca hizalar.
`align-content`	Çapraz eksende fazladan boşluk olduğunda esnek kabın çizgilerini hizalar.

Öğe Özellikleri

Property	Description
`order`	Varsayılan olarak, esnek öğeler kaynak sırasına göre düzenlenir. Ancak,`order`özelliği, bunların Flex kabında görünme sırasını kontrol eder.
`flex-grow`	Esnek bir öğenin gerektiğinde büyüyebilme yeteneğini tanımlar. Orantı görevi gören birimsiz bir değeri kabul eder.
`flex-shrink`	Esnek bir öğenin gerektiğinde küçülme yeteneğini tanımlar.
`flex-basis`	Herhangi bir kullanılabilir alan esnek faktörlere göre dağıtılmadan önce bir esnek öğenin ilk boyutunu tanımlar.
`align-self`	Varsayılan hizalamaya (veya tarafından belirtilene) izin verir.`align-items`) tek tek esnek öğeler için geçersiz kılınmalıdır.

Related Tools

Mükemmel Flexbox Düzenleri Oluşturun

Sezgisel sürükle ve bırak arayüzümüzle CSS flexbox kodunu görselleştirin, özelleştirin ve oluşturun.

Stylus'tan CSS'ye Dönüştürücü

SCSS kodunuzu CSS'ye dönüştürün. Hızlı, kolay ve güvenli.

SCSS'den CSS'ye dönüştürücü

SCSS kodunuzu CSS'ye dönüştürün. Hızlı, kolay ve güvenli.

CSS Üçgen Oluşturucu

Üçgeninizi aşağıdaki seçeneklerle özelleştirin ve oluşturulan CSS kodunu anında alın.

ASCII'den İkiliye çevirme

ASCII karakterlerini zahmetsizce ikili koda dönüştürün

CSS Küçültücü

CSS kodunuzu profesyonel hassasiyetle sıkıştırın ve optimize edin