img
Css Flexbox İle Esnek Düzenler Oluşturma

Css Flexbox İle Esnek Düzenler Oluşturma

Web tasarımında esnek ve duyarlı düzenler oluşturmak, kullanıcı deneyimini iyileştirmenin önemli bir parçasıdır. CSS Flexbox, bu amaçla kullanılan güçlü bir araçtır. Bu makalede, 'CSS Flexbox', 'esnek düzenler', 'web tasarım Flexbox' ve 'Flexbox kod örneği' anahtar kelimeleri çerçevesinde CSS Flexbox kullanarak esnek düzenler oluşturmayı öğreneceksiniz.

Flexbox Nedir?

CSS Flexbox, esnek kutu düzen modeli olarak da bilinen, öğeleri düzenlemek ve hizalamak için kullanılan bir CSS düzenleme modülüdür. Flexbox, özellikle karmaşık ve dinamik düzenler oluşturmak için tasarlanmıştır ve hem yatay hem de dikey hizalamayı kolaylaştırır.

Flexbox'ın Avantajları

  • Esneklik: Flexbox, öğelerin boyutlarını ve konumlarını esnek bir şekilde ayarlamayı sağlar.
  • Merkezleme: Öğeleri hem yatay hem de dikey olarak kolayca merkezleyebilirsiniz.
  • Duyarlılık: Farklı ekran boyutlarına uyum sağlamak için harikadır.
  • Basitlik: Karmaşık düzenler oluşturmayı daha basit ve anlaşılır hale getirir.

Flex Container ve Flex Item Kavramları

Flexbox düzeni oluşturmak için iki ana kavramı anlamak önemlidir:Flex Container (esnek konteyner) ve Flex Item (esnek öğe).

Flex Container

Flex Container, flex öğeleri içerir ve display:flex; veya display:inline-flex; özellikleri ile tanımlanır.

.container {
    display: flex;
}

Flex Item

Flex Item, flex container içindeki her bir öğedir. Flex container içindeki tüm doğrudan çocuk öğeler flex item olur.

<div class="container">
    <div class="item">Öğe 1</div>
    <div class="item">Öğe 2</div>
    <div class="item">Öğe 3</div>
</div>

Flexbox ile Düzen Oluşturma

Flexbox ile düzen oluştururken kullanabileceğiniz çeşitli özellikler vardır. İşte bazı temel Flexbox özellikleri:

flex-direction

flex-direction, flex öğelerinin hangi yönde hizalanacağını belirler.

.container {
    display: flex;
    flex-direction: row; /* Diğer seçenekler: row-reverse, column, column-reverse */
}

justify-content

justify-content, flex öğelerinin ana eksen boyunca nasıl hizalanacağını belirler.

.container {
    display: flex;
    justify-content: center; /* Diğer seçenekler: flex-start, flex-end, space-between, space-around, space-evenly */
}

align-items

align-items, flex öğelerinin çapraz eksen boyunca nasıl hizalanacağını belirler.

.container {
    display: flex;
    align-items: center; /* Diğer seçenekler: flex-start, flex-end, stretch, baseline */
}

Örnek Kod ve Uygulama

Şimdi, Flexbox ile basit ve esnek bir düzen oluşturmak için örnek bir uygulama yapalım.

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Düzen Örneği</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item">Öğe 1</div>
        <div class="item">Öğe 2</div>
        <div class="item">Öğe 3</div>
    </div>
</body>
</html>

CSS

/* styles.css dosyası */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 80%;
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
}

.item {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    margin: 10px;
    border-radius: 5px;
    text-align: center;
    flex: 1;
}

Açıklama:

  • body:Sayfanın ortalanmasını sağlar.
  • container:Flex container oluşturur ve öğelerin eşit aralıklı olmasını sağlar.
  • item:Flex öğelerin stilini belirler ve eşit büyüklükte olmasını sağlar.

Flexbox Düzeninde Kullanılan Diğer Özellikler

flex-wrap

Flex öğelerinin bir satırı aşıp aşmayacağını belirler.

.container {
    display: flex;
    flex-wrap: wrap; /* Diğer seçenekler: nowrap, wrap-reverse */
}

flex-grow

Flex öğesinin büyüme oranını belirler.

.item {
    flex-grow: 2; /* Diğer öğelerden 2 kat daha fazla büyür */
}

flex-shrink

Flex öğesinin küçülme oranını belirler.

.item {
    flex-shrink: 1; /* Diğer öğelerle aynı oranda küçülür */
}

CSS Flexbox ile esnek ve duyarlı düzenler oluşturmak, web tasarımında büyük bir avantaj sağlar. 'CSS Flexbox', 'esnek düzenler', 'web tasarım Flexbox' ve 'Flexbox kod örneği' anahtar kelimeleri etrafında, Flexbox'ın ne olduğunu, flex container ve flex item kavramlarını, Flexbox ile düzen oluşturmayı ve örnek bir uygulamayı öğrendiniz. Flexbox kullanarak karmaşık düzenleri basit ve etkili bir şekilde oluşturabilir, web sitelerinizin kullanıcı deneyimini iyileştirebilirsiniz. Flexbox ile çalışmaya devam ederek, web tasarım becerilerinizi daha da geliştirebilirsiniz.

İlk Yorumu Yapan Sen Ol!

Web Tasarımlar

  • Lisans Yönetim Scripti 2

    22K
    1000.00₺
  • Canlı Radyo Dark Scripti

    14.4K
    1000.00₺
  • Canlı Radyo Light Scripti

    8.7K
    1000.00₺
  • Rüzgar Radyo Scripti

    8.6K
    0.00₺
  • Radyo Minimal

    4.5K
    1000.00₺
  • Ekitap Scripti

    6.4K
    3000.00₺
  • Aşk Sevgililer GünüEvlilik

    7.9K
    1000.00₺
  • Sohbet Scripti

    8.2K
    0.00₺
  • Dialog Whatsapp Benzeri Sohbet

    5.2K
    0.00₺
  • Firebase Chat

    4.1K
    0.00₺
  • Web Ajans Scripti

    26.4K
    3500.00₺
  • Ajans Scripti Kolay Kullanım

    3.4K
    1000.00₺
  • Ajans Scripti V2

    3.3K
    1000.00₺
  • Ajans Scripti V3

    3.4K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Scripti

    2.3K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Web Tasarım V2

    3K
    1000.00₺
  • Mobil Uyumlu Çilingir Scripti

    2.2K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarım

    2.9K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı

    2.5K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2

    42.8K
    1000.00₺
  • İlaçlama Şirketi Web Tasarımı

    6.1K
    1000.00₺
  • İlan Web Tasarımı

    2.7K
    1000.00₺
  • İlan Web Tasarımı V2

    2.5K
    1500.00₺
  • İnşaat Firması Web Tasarımı

    2.2K
    1000.00₺
  • İnşaat Firması Tasarımı V2

    2.2K
    1000.00₺
  • Kitapçı Kırtasiye Web Tasarımı

    2.7K
    1000.00₺
  • Kombi Klima Servisi Web Tasarımı

    2.5K
    1000.00₺
  • Korku Evi Eğlence Mekanı Web Tasarımı

    2.5K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V2

    3.6K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V3

    3.7K
    1000.00₺
  • Ajans Web Tasarımı V4

    2.7K
    1500.00₺
  • Kurumsal Firma Web Tasarımı V4

    3.3K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V5

    3.9K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V6

    3.5K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V7

    3.8K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V8

    3.3K
    1000.00₺
  • Mobilya Dekorasyon Web Tasarımı

    3K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı

    2.3K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V2

    2.7K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V3

    2.9K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı

    2.5K
    1000.00₺
  • Otel Pansiyon Web Tasarımı

    2.6K
    1000.00₺
  • Özel Oto Servis Web Tasarımı

    2.4K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı

    6.5K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı V2

    3.6K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı

    3.1K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı V2

    3K
    1000.00₺
  • Teknik Servis Web Tasarımı

    3K
    1000.00₺
  • Sigorta Acenta Web Tasarımı

    2.5K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı

    2.6K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V2

    3K
    1000.00₺
  • Sürücü Kursu Web Tasarımı

    3.2K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı

    3.3K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı V2

    2.9K
    1000.00₺
  • Tek Ürün Yaprak Web Tasarımı

    2.7K
    1100.00₺
  • Tek Ürün Yaprak Web Tasarımı V2

    3.1K
    1100.00₺
  • Tek Ürün Satış Web Tasarımı V3

    3K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı

    3K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı V2

    3K
    1000.00₺
  • Ajans Web Tasarımı V5

    3.4K
    1000.00₺
  • Ajans Web Tasarımı V6

    4.6K
    1000.00₺
  • Werock Radyo Web Tasarımı

    4.5K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Tasarımı V3

    1.8K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2

    1.7K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3

    6.2K
    1000.00₺
  • İnşaat Firması Web Tasarımı V3

    1.7K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V9

    1.8K
    1000.00₺
  • Mimarlık Web Tasarımı

    1.6K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V4

    2K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı V2

    1.6K
    1000.00₺
  • Psikolog Web Tasarımı

    1.8K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V3

    2K
    1200.00₺
  • Sürücü Kursu Web Tasarımı V2

    2.1K
    1000.00₺
  • Teknik Servis Web Tasarımı V3

    2.3K
    1000.00₺
  • Ajans Web Tasarımı V7

    2K
    900.00₺
  • Google Indexing Api

    690
    500.00₺
  • Milando Radyo Wordpress Teması

    864
    1000.00₺

Vip Tema Web Ajans Yazılımı

Profesyonel ve her yönü ile kontrol edilebilir gelişmiş çok özellikli ajans yazılımıdır. İşte öne çıkan özellikler.

  • PAYTR Ödeme Entegrasyonu
  • SHIPY Ödeme Entegrasyonu
  • WHM Hosting Satış Entegrasyonu
  • Domain Sorgulama/Satış Entegrasyonu
  • Google Authenticator
  • SMS 2 Faktörlü Doğrulama
  • Net Gsm SMS Entegrasyonu
  • İleti Merkezi SMS Entegrasyonu
  • İnteraktif SMS Entegrasyonu
  • Mas GSM SMS Entegrasyonu
img