Altın Konu HTML Öğelerini Hizalamak Ve Flex Kullanımı

ByMoDuS · 16 Nis 2022

HTML Öğelerini Hizalamak Ve Flex Kullanımı

Flexbox'ın temellerini keşfetmek için kullanabileceğiniz örnek bir yapı, tek bir ebeveyn div'in altındaki bir dizi alt div'dir. Aşağıdaki kodda bir ana "parent" div vardır. Üç alt div, esnek özellikleri kullanarak hizalayabileceğiniz öğeleri temsil eder.

<div class="parent">
<div class="child-item"></div>
<div class="child-item"></div>
<div class="child-item"></div>
</div>

Herhangi bir esnek stilin çalışması için, ana esnek kapsayıcıya display: flex özelliğini eklemeniz gerekir.

.parent {
display: flex;
}

Esneklik olmadan, alt div'ler sayfanın aşağısındaki bir sütun oluşumunda birbiri ardına görüntülenir. Bu kurulumun bir örneğini görüntülemek için, bu CodePen parçacığındaki kodu görüntüleyin ve çalıştırın.

Esnek yön özelliği , alt öğelerin satır veya sütun yönünü belirler.

Esnek yön özelliği için seçenekler şunları içerir:

flex-direction: row | column | row-reverse | column-reverse

Hizalamak istediğiniz öğeleri çevreleyen bir ana kap eklemeniz gerekecek.

<div class="parent">
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="purple"></div>
</div>[

CSS;

.red { background-color:red; }
.orange { background-color: orange; }
.yellow { background-color: yellow; }
.green { background-color: green;}
.blue { background-color: blue; }
.purple { background-color: purple; }

.parent div {
width: 40px;
height: 40px;
}

Esnek yön özelliğini üst esnek kapsayıcıya uygulayın. Bu, alt div öğelerini hizalayacaktır.

.parent {
width: 300px;
display: flex;
flex-direction: row;
}

Birçok esnek özellik, ana eksen ve çapraz eksen kavramına atıfta bulunur. Esnek yön satır olduğunda, ana eksen yatay yönü ve çapraz eksen dikey yönü temsil eder. Bir sütun değeri bu eksenleri değiştirir.

Çapraz Eksen Boyunca Hizalama

align-items özelliği, öğelerin çapraz eksen boyunca hizalanmasını kontrol eder. Varsayılan esnek yön için satır, hizalama öğeleri, öğelerin dikey hizalamasını kontrol eder.

Öğeleri hizalama özelliği için seçenekler şunları içerir:

align-items: flex-start | flex-end | align-items | stretch[

Altlarını hizalamak için üst kapsayıcıya hizalama öğeleri özelliğini ekleyin.

.parent {
display: flex;
align-items: flex-start;

Ek olarak, bir taban çizgisi kullanarak öğeleri hizalamayı seçebilirsiniz. Varsayılan olarak, taban çizgisi seçeneği, tüm öğeleri öğelerin tabanına göre hizalar.

Ayrıca, üst (ilk taban çizgisi) veya alt (son taban çizgisi) gibi taban çizgisinin nereden başlayacağını da seçebilirsiniz.

align-items: baseline | first baseline | last baseline;

Öğeleri hizalamak için: taban çizgisinin çalışması için, her öğenin farklı bir yüksekliğe veya genişliğe sahip olduğundan emin olun.

<div class="parent">
<div class="red" style="height:20px"></div>
<div class="orange" style="height:60px"></div>
<div class="yellow" style="height:30px"></div>
<div class="green" style="height:90px"></div>
<div class="blue" style="height:30px"></div>
<div class="purple" style="height:50px"></div>
</div>

Bireysel Öğelerde Hizalama Nasıl Geçersiz Kılınır

align-self özelliği için seçenekler şunları içerir:

align-self: auto | flex-start | flex-end | center | baseline | stretch

Örneğin, ana kabın "satır" olarak ayarlanmış bir esnek yön stiline sahip olduğunu söyleyin.

.parent {
display: flex;
flex-direction: row;
}

align-self özelliğini tek tek öğeye uygulayabilirsiniz. Bireysel öğe, align-self özelliğinin stilini kullanacak ve öğeyi üst kapsayıcı boyunca ortalayacaktır.

<div class="parent">
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green" style="align-self:center"></div>
<div class="blue"></div>
<div class="purple"></div>
</div>

Öğeler Arasına Boşluk Nasıl Eklenir

Boşluk özelliği, öğeler arasına bir miktar boşluk eklemenizi sağlar. Duyarlı bir düzen oluşturmanıza yardımcı olabilecek en yeni CSS özelliklerinden biridir.

Gap özelliğini üst esnek kapsayıcıya uygulayın.

.parent {
display: flex;
gap: 70px;
}

Öğelerin uzunluğunu üst öğenin genişliğini aşmaya zorlayan bir boşluk eklerseniz öğeler, sıranın içine sığdırmak için küçülür.

.parent {
width: 300px;
gap: 120px;
}

Öğeleri yeni bir satıra itmek için esnek sarma: sarma kullanırsanız, boşluk miktarı satırlar arasındaki boşluğa da uygulanır.

.parent {
width: 300px;
flex-wrap: wrap;
gap: 120px;
}

Ayrıca, satır aralığı ve sütun aralığı özelliklerini de ayarlayabilirsiniz. Yine, bunları ana esnek kapsayıcıya uygulamanız gerekecek.

Row-gap özelliği, her satır arasındaki boşluğu belirler. Sütun boşluğu özelliği, her sütun arasındaki boşluğu belirler.