CSS align-items özelliği nedir?
İçindekiler
CSS align-items özelliği bir konteynerin içerdiği öğeleri dikey olarak hizalamak için kullanılan bir CSS özelliğidir. Bu özellik, bir flex konteynerinde yer alan öğelerin hizalanma düzenini belirlemek için kullanılır. align-items özelliği, bir konteynerdeki öğeleri yatay eksende hizalayarak veya düzenlemek için kullanılan bir diğer özellik olan justify-content ile birlikte kullanılır.
Align-items özelliği, bir dizi farklı değeri kabul eder. Bu değerler, öğelerin dikey hizalamasını belirler. Özellikle, “flex-start”, “flex-end”, “center” ve “stretch” gibi değerler kullanılabilir.
Liste ve Tablo Kullanımı
- “flex-start”: Öğeler, konteynerin üst kısmına hizalanır.
- “flex-end”: Öğeler, konteynerin alt kısmına hizalanır.
- “center”: Öğeler, konteynerin dikey ortasına hizalanır.
- “stretch”: Öğeler, konteynerin tam yüksekliğine yayılır.
| Değer | Açıklama |
|---|---|
| “flex-start” | Konteynerin üst kısmına hizalar. |
| “flex-end” | Konteynerin alt kısmına hizalar. |
| “center” | Konteynerin dikey ortasına hizalar. |
| “stretch” | Konteynerin tam yüksekliğine yayılır. |
align-items nasıl kullanılır?
align-items özelliği, bir flex container’daki flex item’ları dikey ortalama ve hizalama işlemi için kullanılır. Bu özellik, flex item’ların dikey hizalamasını belirler ve bunları container içerisinde nasıl yerleştireceğini belirler.
Eğer align-items özelliği kullanılmazsa, flex item’lar container içerisinde varsayılan olarak stretch olarak hizalanır ve tüm yükseklikleri container yüksekliğine kadar uzar. Ancak, align-items özelliği kullanıldığında, flex item’lar dikey olarak hizalanabilir ve container içerisinde belirtilen hizaya göre yerleştirilebilir.
align-items özelliğinin alabileceği değerler şunlardır:
- flex-start: Flex item’ları container’ın üst kısmındaki çizgiye hizalar.
- flex-end: Flex item’ları container’ın alt kısmındaki çizgiye hizalar.
- center: Flex item’ları dikey olarak ortalar.
- baseline: Flex item’ları temel çizgiye (baseline) hizalar.
- stretch: Flex item’ları container’ın yüksekliğine kadar uzatır.
| Değer | Açıklama |
|---|---|
| flex-start | Flex item’ları container’ın üst kısmındaki çizgiye hizalar. |
| flex-end | Flex item’ları container’ın alt kısmındaki çizgiye hizalar. |
| center | Flex item’ları dikey olarak ortalar. |
| baseline | Flex item’ları temel çizgiye (baseline) hizalar. |
| stretch | Flex item’ları container’ın yüksekliğine kadar uzatır. |
align-items özelliği hangi değerleri alır?
align-items özelliği, CSS Flexbox modelinde kullanılan bir özelliktir ve eşlik ettiği Flex Container üzerindeki öğelerin nasıl hizalandığını kontrol etmek için kullanılır. Bu özellik, Flex Container içerisinde yer alan öğelerin dikey eksen üzerindeki hizalamasını belirler.
align-items özelliği aşağıdaki değerleri alabilir:
- flex-start: Bu değer, öğelerin Flex Container’in üst kısmına hizalanmasını sağlar. Yani öğeler, dikey eksende en üst noktada hizalanır.
- flex-end: Bu değer, öğelerin Flex Container’in alt kısmına hizalanmasını sağlar. Yani öğeler, dikey eksende en alt noktada hizalanır.
- center: Bu değer, öğelerin Flex Container’in dikey eksendeki ortasına hizalanmasını sağlar. Yani öğeler, dikey eksende tam ortada hizalanır.
- baseline: Bu değer, öğelerin Flex Container’in başlangıç hattına göre hizalanmasını sağlar. Eğer öğelerin içerisinde metin olduğunda, metinlerin alt hizasına göre hizalanır.
- stretch: Bu değer, öğeleri Flex Container’in dikey ekseni boyunca tamamen gererek hizalar. Yani öğeler dikey yönde tamamen uzar ve Flex Container’ın yüksekliği ile aynı olur.
| Değer | Açıklama |
|---|---|
| flex-start | Öğeler, dikey eksende en üst noktada hizalanır. |
| flex-end | Öğeler, dikey eksende en alt noktada hizalanır. |
| center | Öğeler, dikey eksende tam ortada hizalanır. |
| baseline | Öğeler, dikey eksendeki başlangıç hattına göre hizalanır. |
| stretch | Öğeler, dikey yönde tamamen uzayarak Flex Container’ın yüksekliği ile aynı hizada olur. |
align-items: flex-start nasıl kullanılır?
align-items: flex-start, CSS flexbox modelindeki bir özelliktir ve bir konteynerin içindeki öğelerin dikey hizalamasını nasıl yapacağımızı belirler. Bu özellik, öğeleri konteynerin üst tarafına hizalar. Yani, içerideki öğelerin üst kenarları diğer öğelerle aynı hizada olur.
Bu özelliği kullanmak için, hedef konteynerin CSS koduna align-items: flex-start eklememiz gerekiyor. Örneğin, aşağıdaki kod parçasında, “container” adlı bir div öğesine align-items: flex-start stil özelliği uygulanmıştır:
.container {
display: flex;
align-items: flex-start;
}
Eğer bu özelliği kullanırsak, konteyner içindeki öğeler üst kenar üzerinde hizalanacak ve diğer öğelerden yukarı doğru yerleştirilecektir. Bu özellik özellikle, bir dikey menü veya bir galeri gibi içeriklerin düzgün bir şekilde yerleştirilmesi için kullanışlıdır.
align-items: flex-end nasıl kullanılır?
align-items: flex-end, CSS’te kullanılan bir özelliktir ve kutuları hizalamak için kullanılır. “align-items” özelliği, birlikte çalıştığı eşleşen öğelerin yerleşimini belirler. Bu özelliği kullanarak bir konteyner içindeki öğeleri dikey olarak hizalayabilirsiniz.
Bu özellik, öğeleri konteynerin alt kenarına hizalar. Öğeler, konteynerin en alt kısmına karşı hizalanır ve dikey olarak aşağıya doğru yerleşir.
Bunu nasıl kullanacağınıza dair bir örnek olarak, aşağıdaki HTML ve CSS kodlarını inceleyebilirsiniz:
| HTML Kodu | CSS Kodu |
|---|---|
|
<div class=”container”> <div class=”item”>Öğe 1</div> <div class=”item”>Öğe 2</div> <div class=”item”>Öğe 3</div> </div> |
.container { display: flex; align-items: flex-end; } .item { |
Yukarıdaki kodda, bir “container” adında bir div oluşturduk ve içine üç adet “item” adında div ekledik. CSS kısmında, “container” için “display: flex;” stilini ve “align-items: flex-end;” stilini belirledik.
Şimdi, öğelerin nasıl hizalandığını görmek için bu kodu bir web tarayıcısında açabilirsiniz. “Öğe 1”, “Öğe 2” ve “Öğe 3” adındaki öğelerin tümü en alt sıraya hizalanacak ve aşağıya doğru yerleştirilecektir.
align-items: center nasıl kullanılır?
CSS’de align-items özelliği, bir flex konteynerinin içerisindeki öğelerin dikey hizalamasını düzenlemeye yarayan bir özelliktir. align-items özelliği, flex-direction özelliği row olarak belirlendiğinde dikey hizalamayı, flex-direction özelliği column olarak belirlendiğinde ise yatay hizalamayı değiştirir. Bu yazıda align-items: center kullanımını detaylı bir şekilde inceleyeceğiz.
align-items: center kullanarak, flex konteynerindeki öğeleri dikey olarak ortalamak mümkündür. Yani, öğeleri dikey eksende merkezlemek istediğimizde align-items: center özelliğini kullanırız. Böylece öğeler, dikey eksende ortalanır ve sayfanın ortasında görüntülenir. Örneğin:
| HTML Kodu | CSS Kodu |
|---|---|
|
<div class=”flex-container”> <div class=”item”>Öğe 1</div> <div class=”item”>Öğe 2</div> <div class=”item”>Öğe 3</div> </div> |
.flex-container { display: flex; align-items: center; } |
Yukarıdaki örnekte, flex-container isimli bir div içerisinde üç adet öğe bulunmaktadır. Bu öğeleri dikey olarak ortalamak için align-items: center özelliği kullanılmıştır. Bu sayede, öğeler dikey eksende merkezlenmiştir.
align-items: stretch nasıl kullanılır?
align-items özelliği, CSS Flexbox modelinde elemanları dikey olarak hizalamak için kullanılan bir özelliktir. Bu özellik sayesinde, bir container içerisindeki elemanları belirli bir hizalama düzenine göre yerleştirme imkanı sağlar.
Aynı hizada bulunan elemanların genişliklerini, containerın genişliği boyunca germe özelliğine sahiptir. Bu sayede elemanlar, eşit boşluklarla containerı kaplar ve yatay yönde genişler.
Bununla birlikte, align-items özelliği bazı değerleri de kabul eder. Örneğin, flex-start değeri elemanları containerın üst kısmına hizalar, flex-end değeri ise elemanları containerın alt kısmına hizalar. Center değeri ise elemanları dikey olarak ortalar.
- align-items: stretch değeri ise elemanları containerın tam genişliğinde yayarak hizalar.
| Değer | Açıklama |
|---|---|
| flex-start | Elemanları containerın üst kısmına hizalar |
| flex-end | Elemanları containerın alt kısmına hizalar |
| center | Elemanları dikey olarak ortalar |
| stretch | Elemanları containerın tam genişliğinde yayarak hizalar |
Sık Sorulan Sorular
align-items özelliği nedir?
align-items özelliği, bir dizi öğenin dikey hizalamasını kontrol etmek için kullanılan bir CSS özelliğidir. Bu özellik, bir flex konteynerindeki öğeleri dikey olarak hizalamak için kullanılır.
align-items nasıl kullanılır?
align-items özelliği, bir flex konteynerine (örneğin, bir div) uygulanır. Özelliğin değeri, öğelerin dikey hizalamasını belirler. Bu değerler, flex-start, flex-end, center ve stretch olarak dört farklı seçenek arasından seçilebilir.
align-items özelliği hangi değerleri alır?
align-items özelliği, aşağıdaki dört değeri alabilir:
- flex-start: Öğeleri dikey olarak konteynerin başlangıcına hizalar.
- flex-end: Öğeleri dikey olarak konteynerin sonuna hizalar.
- center: Öğeleri dikey olarak konteynerin ortasına hizalar.
- stretch: Öğeleri dikey olarak konteynerin boyutuna gerer.
align-items: flex-start nasıl kullanılır?
align-items: flex-start, öğeleri dikey olarak flex konteynerin başlangıcına hizalar. Bu özelliği kullanmak için şu kodu kullanabilirsiniz:
.flex-container {
align-items: flex-start;
}align-items: flex-end nasıl kullanılır?
align-items: flex-end, öğeleri dikey olarak flex konteynerin sonuna hizalar. Bu özelliği kullanmak için şu kodu kullanabilirsiniz:
.flex-container {
align-items: flex-end;
}align-items: center nasıl kullanılır?
align-items: center, öğeleri dikey olarak flex konteynerin ortasına hizalar. Bu özelliği kullanmak için şu kodu kullanabilirsiniz:
.flex-container {
align-items: center;
}align-items: stretch nasıl kullanılır?
align-items: stretch, öğeleri dikey olarak flex konteynerin boyutuna gerer. Bu özelliği kullanmak için şu kodu kullanabilirsiniz:
.flex-container {
align-items: stretch;
}