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.
- normal
- stretch
- flex-start
- flex-end
- center
- 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;
- flex-start
- flex-end
- center
- stretch
- space-between
- space-around
- 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..