CSS FLEX İLE DİKEY HİZALAMA (ALIGN-ITEMS ve ALIGN-CONTENT)

Merhaba..

CSS flex yapısı içindeki elemanları dikeyde hizalamak için align-items ve align-conent özelliklerini kullanıyoruz. Eğer kapsayıcı içeriği tek satır elemanlardan oluşuyorsa dikey hizalama için align-items ,  birden fazla satırdan oluşuyorsa align-content özellikleri kullanılır.

ALIGN-ITEMS ÖZELLİĞİ

Kapsayıcı içindeki tek satırdan oluşan elemanları dikeyde hizalamak için ALIGN-ITEMS özelliğini kullanıyoruz.  Aldığı değerlere bakalım.

1. normal
2. stretch
3. flex-start
4. flex-end
5. center
6. baseline

Align-content özelliğini uygulayabilmek için önce bir container ve içinde divleri ekleyelim.

.container { 
    display: flex; 
    width:70%;  
    margin: 100px auto; 
    padding: 3rem;	
    border:3px solid #ccc; 
    height:200px;

    display: flex;
}

 	<div class="container"> 
		<div class="box"> DIV 1 </div>
		<div class="box"> DIV 2 </div>
		<div class="box"> DIV 3 </div>
		<div class="box"> DIV 4 </div> 
	</div >  

Yukarıdaki HTML kodlarda 4 tane "box" class'lı div ,  CONTAINER class'lı div içinde olduğu için kapsayıcı eleman CONTAINER olur.  Dolayısıyla bu div'e display : flex özelliği ekledik. 

NORMAL

Flex uygulanmış bir yapıda varsayılan dikey hizalama şeklidir. Kapsayıcı içindeki elemanlar üstte hizalanırlar.  Eğer elemanalra yükseklik değeri verilmediyse , elemanlar kapsayıcı yüksekliğine eşitlenir. 

.container { align-items : normal; }

STRETCH

Align-items özelliği strectch yapıldığında, kapsayıcı içindeki elemanlar kapsayıcı yüksekliğine uyumlanır. YAni kapsayıcının alt kenarına kadar uzanırlar. Ancak elemanların tanımlanan yükseklikleri var ise ,herhangi bir değişiklk olmaz... 

.container { align-items : stretch;}

FLEX-START

Align-items özelliği flex-start yapıldığında, kapsayıcı içindeki elemanlar üstte hizalanırlar.  

.container {align-items : flex-start;}

FLEX-END

Align-items özelliği flex-end yapıldığında, kapsayıcı içindeki elemanlar altta hizalanırlar.  

.container {  align-items : flex-end; }

CENTER

Align-items özelliği center yapıldığında, kapsayıcı içindeki elemanlar ortada hizalanırlar.  

.container { align-items : center; }

BASELINE

Align-items özelliği baseline yapıldığında, kapsayıcı içindeki elemanlar farklı boyutlarda yazılara sahipse, bu  yazıların taban çizgisine göre hizalanırlar.. 

.container { align-items : baseline;}

ALIGN-CONTENT ÖZELLİĞİ

Eğer kapsayıcı içerisindeki elemanlar kapsayıcı genişliğine sığmayıp alt satıra geçerse (flex-wrap:wrap) bu durumda , birden fazla satırda yerleşim olacağı için align-items yerine align-content özelliği kullanılır.  Aldığı değerler;

1. flex-start
2. flex-end
3. center
4. stretch
5. space-between
6. space-around
7. space-evenly

Align-content özelliğini uygulayabilmek için önce bir container ve içinde "wrap" alt satıra geçen divleri ekleyelim.

HTML

.box {padding:1rem; background: orange; width:40%;height:30px}

.container {
      width:70%; height:250px; margin: 100px auto; padding: 1rem;  border:3px solid #ccc;  
      display: flex;  
      flex-wrap: wrap;
      gap:1rem;
      justify-content: center;
}

CSS

<div class="container">
    <div class="box"> 1 </div>
    <div class="box"> 2 </div> 
    <div class="box"> 3 </div>
    <div class="box"> 4 </div>
</div>

EKRAN

Align-content için herhangi bir değer belirtilmediği için , divler varsayılan olarak  dikeyde yukarıdaki gibi  (STRECTH) hizalanırlar..

STRECTH

Varsayılan değerdir. Align-content özelliği strecth yapıldığında, ilk satır kapsayıcı üst kenarına dayanırken, diğer satırlar araların eşit boşluk kalacak şekilde yerleşirler. KApsayıcının alt kenarı ile ona en yakın satır arasındada aynıu boşluk bırakılır..

.container {  align-content : flex-end; }

ALIGN-CONTENT : STRECTH

FLEX-START

Align-content özelliği flex-start yapıldığında, kapsayıcı içindeki elemanlar üstte hizalanırlar.  

.container {  align-content : flex-start; }

ALIGN-CONTENT : FLEX-START

FLEX-END

Align-content özelliği flex-end yapıldığında, kapsayıcı içindeki elemanlar alttahizalanırlar.  

.container {  align-content : flex-end; }

ALIGN-CONTENT : FLEX-END

CENTER

Align-content özelliği center yapıldığında, kapsayıcı içindeki eleman bloğu  dikeyde ortalancaktır..

.container {  align-content : center; }

ALIGN-CONTENT : CENTER

SPACE-BETWEEN

Align-content özelliği space-between yapıldığında, ilk satır üste , son satır alta dayanır. Varsa diğer satırlar aralarında eşit boşluk kalacak şekilde hizalanırlar..

.container {  align-content : space-between; }

ALIGN-CONTENT : SPACE-BETWEEN

SPACE-AROUND

Align-content özelliği space-around yapıldığında, ilk satır üsten biraz aşağıya , son satırda alttan biraz yukarıya  yerleşirken varsa diğer satırlar aralarında eşit boşluk kalacak şekilde hizalanırlar..

.container {  align-content : space-around; }

ALIGN-CONTENT : SPACE-AROUND

SPACE-EVENLY

Align-content özelliği space-evenly yapıldığında, tüm satırlar , aralarında eşit boşluk kalacak şekilde hizalanırlar. Kapsayıcının alt ve üst kenarı ile satırlar arasındada aynı boşluk bırakılır..

.container {  align-content : space-around; }

ALIGN-CONTENT : EVENLY

W3school'daki demodan farklı justiy-content değerlerinin yerleşimlerini görebilir ve deneyebilirsiniz...

W3school ALIGN-ITEMS Demo Uygulama

Görüşmek üzere..