TEKNOLOJI

incele

YAZILIM

İncele

BILIŞIM & HOSTING

İncele

WEBMASTER

İncele

Yarasa.NET'e Hoşgeldin

Bize kaydolarak Teknolojiyi yakından takip edebilir Oyuncu topluluğumuza katılabilir forumumuzun diğer üyeleriyle tartışabilir, paylaşabilir ve özel mesaj gönderebilirsiniz.

Hemen Kayıt Ol!

Yazılım CSS Flexbox ile Yatay ve Dikey Hizalama

ADMİN
Moderatör
Katılım
19 Ocak 2024
Mesajlar
159
Tepkime puanı
10
Puanları
18
Ödüller
6

CSS Flexbox ile Yatay ve Dikey Hizalama



Flexbox, CSS ile öğeleri yatay ve dikey olarak hizalamanın en kolay yollarından biridir. Duyarlı (responsive) ve düzenli bir tasarım oluşturmak için flexbox özellikleri sıklıkla kullanılır. İşte temel ve ileri düzey flexbox teknikleri.

Temel Flexbox Yapısı



Bir öğeyi ortalamak için flexbox kullanabilirsiniz:

CSS:
.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.flex-item {
    background-color: #007BFF;
    color: white;
    padding: 20px;
    font-size: 18px;
    border-radius: 5px;
}

HTML Yapısı:
HTML:
<div class="flex-container">
    <div class="flex-item">Ortalanmış Öğeler</div>
</div>

Bu yapı, öğeyi hem yatay hem de dikey olarak sayfanın ortasına hizalar.

Flexbox ile Duyarlı Hizalama



Flexbox, öğeleri ekran boyutuna göre hizalamak için de kullanılabilir.

CSS:
.flex-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    padding: 20px;
}

.flex-responsive .item {
    flex: 1 1 calc(33.333% - 20px);
    background-color: #007BFF;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .flex-responsive .item {
        flex: 1 1 calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .flex-responsive .item {
        flex: 1 1 100%;
    }
}

HTML Yapısı:
HTML:
<div class="flex-responsive">
    <div class="item">Öğe 1</div>
    <div class="item">Öğe 2</div>
    <div class="item">Öğe 3</div>
    <div class="item">Öğe 4</div>
    <div class="item">Öğe 5</div>
</div>

Flexbox ile Sıralama Kontrolü



Flexbox özelliklerini kullanarak öğelerin sırasını değiştirebilirsiniz.

CSS:
.flex-order {
    display: flex;
    gap: 10px;
}

.flex-order .item {
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
    border: 1px solid #ddd;
    text-align: center;
    flex: 1;
}

.flex-order .item:nth-child(3) {
    order: -1;
    background-color: #007BFF;
    color: white;
}

HTML Yapısı:
HTML:
<div class="flex-order">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3 (Öncelikli)</div>
    <div class="item">4</div>
</div>

Daha Karmaşık Hizalamalar



Flexbox ile öğeleri farklı yönlerde hizalamak için `flex-direction` ve `align-items` özelliklerini kullanabilirsiniz:

CSS:
.flex-complex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    background-color: #f4f4f4;
    padding: 20px;
}

.flex-complex .item {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    margin: 5px 0;
    border-radius: 5px;
}

HTML Yapısı:
HTML:
<div class="flex-complex">
    <div class="item">Öğe 1</div>
    <div class="item">Öğe 2</div>
    <div class="item">Öğe 3</div>
</div>

Kullanım Alanları



- Navigasyon menüleri
- Ürün kartları
- Duyarlı düzenler
- Basit düzenlemeler için hızlı hizalama
 

Konuyu görüntüleyenler

Çevrim içi kullanıcılar 9 Üye
Konular 209 Konu
Mesajlar 260 Mesaj
Kullanıcılar 125 Üye
Geri
Üst