Geyic
  • Anasayfa
  • Kripto Para
  • Donanım
    • Donanım

      Giriş ve Çıkış Birimleri 2021

      Nisan 5, 2021

      Donanım

      Freedos’a Windows Kurma 2021

      Mart 19, 2021

      Donanım

      Format Atarken Disk Bölme İşlemi Yapımı 2021

      Mart 18, 2021

      Donanım

      Nvidia Geforce Now Nedir?

      Ocak 28, 2021

      Donanım

      Ram Seçimi Nasıl Yapılmalıdır ?

      Aralık 27, 2020

  • Haberler
    • Haberler

      Altın ve Döviz Kaybettirdi

      Ağustos 30, 2021

      Haberler

      Gözleri Büyüten Makyaj Nasıl Yapılır?

      Ağustos 9, 2021

      Haberler

      Bacaklarımı Nasıl Uzun Gösterebilirim?

      Ağustos 6, 2021

      Haberler

      Erkeklerin İlişkide Katlanamadığı 6 Konu

      Ağustos 5, 2021

      Haberler

      Yağlı Ciltler İçin Bakım Rutinleri

      Ağustos 4, 2021

  • Mobil
    • Mobil

      İphone’da Bilinmeyen 10 Özellik

      Nisan 3, 2021

      Mobil

      iCloud Yedekleme

      Nisan 2, 2021

      Mobil

      Telefonum Su Geçirdi Ne Yapmalıyım?

      Mart 30, 2021

      Mobil

      Telefondan Bilgisayara Ekran Yansıtma 2021

      Mart 29, 2021

      Mobil

      Telefonum Çok Fena Isınıyor

      Mart 28, 2021

  • Telefon Tamiri
Popular
Yat Ehliyeti Nasıl Alınır?
Hangi Bıçak Ne İçin Kullanılır?
Direksiyon Hakimiyeti Nasıl Sağlanır
Altın ve Döviz Kaybettirdi
Gözleri Büyüten Makyaj Nasıl Yapılır?
Bacaklarımı Nasıl Uzun Gösterebilirim?
Erkeklerin İlişkide Katlanamadığı 6 Konu
Yağlı Ciltler İçin Bakım Rutinleri
Her Bilgisayarda Bulunması Gereken Programlar
Google Chrome Hızlandırma Yöntemleri
Geyic
  • Anasayfa
  • Kripto Para
  • Donanım
    • Donanım

      Giriş ve Çıkış Birimleri 2021

      Nisan 5, 2021

      Donanım

      Freedos’a Windows Kurma 2021

      Mart 19, 2021

      Donanım

      Format Atarken Disk Bölme İşlemi Yapımı 2021

      Mart 18, 2021

      Donanım

      Nvidia Geforce Now Nedir?

      Ocak 28, 2021

      Donanım

      Ram Seçimi Nasıl Yapılmalıdır ?

      Aralık 27, 2020

  • Haberler
    • Haberler

      Altın ve Döviz Kaybettirdi

      Ağustos 30, 2021

      Haberler

      Gözleri Büyüten Makyaj Nasıl Yapılır?

      Ağustos 9, 2021

      Haberler

      Bacaklarımı Nasıl Uzun Gösterebilirim?

      Ağustos 6, 2021

      Haberler

      Erkeklerin İlişkide Katlanamadığı 6 Konu

      Ağustos 5, 2021

      Haberler

      Yağlı Ciltler İçin Bakım Rutinleri

      Ağustos 4, 2021

  • Mobil
    • Mobil

      İphone’da Bilinmeyen 10 Özellik

      Nisan 3, 2021

      Mobil

      iCloud Yedekleme

      Nisan 2, 2021

      Mobil

      Telefonum Su Geçirdi Ne Yapmalıyım?

      Mart 30, 2021

      Mobil

      Telefondan Bilgisayara Ekran Yansıtma 2021

      Mart 29, 2021

      Mobil

      Telefonum Çok Fena Isınıyor

      Mart 28, 2021

  • Telefon Tamiri
Yazılım

CSS Flexbox Nedir, Nasıl Kullanılır?

Yazar Umut Tamirci Aralık 2, 2020
Yazar Umut Tamirci Aralık 2, 2020 550 Görüntülenme
Okunma Süresi 3 dakika

Kısaca flexbox olarak ifade edebileceğimiz CSS Esnek Kutu Düzeni, bir CSS3 web mizanpaj modelidir. CSS Esnek Kutu Düzeni Modülü Seviye 1, W3C’nin Aday Öneri Durumu aşamasında bir iyileştirmedir. Flexbox, temelde ekran boyutuna veya cihaza bağlı olarak duyarlı öğeleri otomatik olarak görüntüleyen 2 boyutlu bir hareket alanıdır. Olarak düzenlenmesine izin verir. Peki, flexbox hangi ihtiyaç temelinde bir çözüm olarak önerilir? Öncelikle, Flexbox Yerleşim Modülünden önce sahip olduklarımıza bir göz atalım:

  • Block (div ve/veya section için)
  • Inline (metinler için)
  • Table (iki boyutlu tablo verileri için)
  • Positioned (elementin konumlandırılması için)

Yıllar önce HTML / CSS çalışmalarında, mizanpaj çalışması için (tablo) mizanpajlar kullandık. Tarayıcı ile cihaz arasındaki farkları bir tarafa bırakırsak, belirtilen boyutlar dahilindeki elemanları rahatlıkla sunabiliriz. Ancak unsurları yeni cihazlarla dinamik olarak sunma ihtiyacı ortaya çıktı. Bu süreç duyarlı tasarım olarak ifade edildi ve bu süreçte (tablo) kullanımı yetersiz kaldı. (Div veya bölümler) daha yoğun kullanmaya başladık. Ancak bu süreçte bir noktadan sonra (yatay ve / veya dikey konumlandırma, genişlik-yükseklik ayarı, sıralama vb. Nedenlerle) tıkanmaya başladı. Flexbox, bu sorunları çözmek için geliştirilmiş ve tüm modern tarayıcılar tarafından desteklenen bir modül olarak sunuldu.

justify-content Özelliği

Yaslama-içerik Özelliğindeki öğeleri yatay olarak hizalamak için kullanılır.
flex-start: Öğeleri flexbox konteynerin sol tarafına hizalar.
flex-end: Öğeleri flexbox konteynerin sağ tarafına hizalar.
center: Flexbox kabının ortasındaki öğeleri hizalar.
space-between: Öğeler eşit aralıklarla yatay olarak yayılır.
space-around: Öğeler, etraflarında eşit aralıklarla yatay olarak yayılır.

justify-content: center niteliği, öğeleri yatay olarak ortalar.

align-items Özelliği

Align-items özelliği, içindeki elemanları dikey olarak hizalamak için kullanılır.

  • flex-start: Öğeleri flexbox kabının üstüne hizalar.
  • flex-end: Flexbox kabının altındaki öğeleri hizalar.
  • center: Öğeleri flexbox konteynerin dikey merkezine hizalar.
  • baseline: Öğeleri flexbox kabının metin taban çizgisine hizalar.
  • strech: Öğeler flexbox konteyner boyunca uzanır.

align-items: merkez özelliği öğeleri dikey olarak ortalar.

flex-direction Özelliği

Flex-direction özelliği, öğelerin hangi yönde yerleştirileceğini belirler.

  • row: Öğeler, metin yönüyle aynı yönde yerleştirilir.
  • row-reverse: Öğeler metnin tersi yönde yerleştirilir.
  • column: Öğeler yukarıdan aşağıya yerleştirilir.
  • column-reverse: Öğeler aşağıdan yukarıya doğru yerleştirilir.

flex-direction: column özelliği, öğeleri yukarıdan aşağıya sıralamayı sağlar.

flex-wrap Özelliği

Flex-wrap özelliği, birden fazla satırda görüntülenecek öğelerin nasıl davranacağını belirlemek için kullanılır.

  • nowrap: Tüm öğeler bir satıra sığar.
  • wrap: Öğeler satırlara bölünür.
  • wrap-reverse: Öğeler, satırları ters sırada bölünür.

csscss flexbox nasıl kullanılırcss flexbox nedircss kullanımıcss nedirflexboxflexbox nedir
0
FacebookTwitterPinterestEmail
Umut Tamirci

Önceki Yazı
İnstagram’daki özellik Spotify’a geliyor
Sonraki Gönderi
Borçka Karagöl

DİĞER YAZILAR

Animasyon Yapabileceğiniz 10 Program 2021

Mart 14, 2021

En Çok Kullanılan Programlama Dilleri

Şubat 21, 2021

Web Sitesi Yapmak için Kullanılan Programlar

Şubat 17, 2021

Developer Ne Demek ? Developer Nasıl Olunur?

Şubat 10, 2021

10 Adımda Kodlama Öğrenme

Ocak 25, 2021

Programlama Nedir?

Ocak 24, 2021

Arduino’ya Kütüphane Nasıl Yüklenir?

Ocak 23, 2021

Arduino ile Dikkat Edilmesi Gerekenler

Ocak 22, 2021

Header Ne Demek?

Ocak 11, 2021

Footer Ne Demek?

Ocak 10, 2021

YORUM EKLEYEBİLİRSİNİZ Cancel Reply

Bir sonraki yorumumda adımı, e-postamı ve web sitemi bu tarayıcıya kaydedin.

En Çok Okunanlar

  • 1

    Ormanya Hobbit Evleri / Kocaeli

    Kasım 30, 2020
  • 2

    Giriş ve Çıkış Birimleri 2021

    Nisan 5, 2021
  • 3

    Whatsapp Sözleşmesi Nedir ?

    Ocak 10, 2021
  • 4

    iPhonе 12 Mini Tanıtıldı! iPhonе 12 Mini Fiyatı vе Özеlliklеri

    Kasım 17, 2020
  • 5

    Among Us Nedir? Neden Bu Kadar Popüler Oldu? Görevleri Nasıl?

    Aralık 7, 2020

Sosyal Medya

Facebook Twitter Instagram Pinterest

Kategoriler

  • Bilim
  • Deniz Ulaşımı
  • Donanım
  • Haberler
  • Kripto Para
  • Mobil
  • Mutfak
  • Otomobil
  • Oyunlar
  • Santoku bıçağı
  • Teknoloji
  • Telefon Tamiri
  • Yazılım
Footer Logo
  • Çerez Politikası
  • Gizlilik Politikası
  • Hakkımızda
  • İletişim
  • Kullanım Şartları

Tüm Hakları Saklıdır © 2021
İç Mimarlık Ofisi / Web Tasarım / Tablet Tuz / Dövme Modelleri / Kişisel Blog / Turkish Citizenship / Mak Hafriyat