5.00 / 1 oy

CSS Flexbox align-items Özelliği Nedir ve Nasıl Kullanılır?

Önceki yazı için bkz: CSS Flexbox Justify-Content Nedir ve Nasıl Kullanılır?

CSS ve Flexbox kullanırken flex-direction yönünde hizalama ve ortalama seçeneklerinin neler olduğunu incelemiştik. Flexbox'ta align-items özelliği ise flex-direction olarak seçili olan sksenin (column ya da row) zıttı olan eksen üzerinde düzenleme yapabilmemizi sağlayan özelliktir. Örnek olarak flex-direction özelliği row olan bir container için satır bazlı hizalamada justify content; sütun (yükseklik) bazkı ayarlamayı ise align-items özelliği kullanarak yaparız.

Aşağıdaki html kodu ile oluşturulmuş sayfa yatay olarak sağa hizalanmıştır. Takip eden css kodlarında align-items özelliği ile sütun bazlı olarak yukarı, ortaya, aşağıda ya da sündürülmüş (strech) olarak nasıl hizalanabileceğini inceleyeceğiz.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Flexbox Direction Reitix</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <meta http-equiv="refresh" content="2" >

    <style>
        .ust{background-color: greenyellow; height: 500px; display: flex; flex-direction: row; flex-wrap: nowrap; 
            justify-content: flex-end;}
        .alt{background-color: red;width: 100px;height: 100px;margin: 10px;padding: 10px;color: white;}
    </style>
</head>
<body>
    <div class="ust">
        <div class="alt">1</div>
        <div class="alt">2</div>
        <div class="alt">3</div>
    </div>

</body>
</html>

flexbox align right

CSS Flexbox align-items seçenekleri:

stretch: Default (varsayılan) seçenektir ve container'ı dolduracak şekilde yüksekliği/uzunluğu belirtilmemiş içerikleri sündürür

.ust{background-color: greenyellow; height: 300px; display: flex; flex-direction: row; flex-wrap: nowrap; 
    justify-content: center; align-items: stretch;}
.alt{background-color: red;width: 100px; margin: 10px;padding: 10px;color: white;}flexbox strech

flex-start: Elemanlar flex-direction'a zıt eksende başa hizalanırlar

flex-end: Elemanlar flex-direction'a zıt eksende sona hizalanırlar

center: Elemanlar flex-direction'a zıt eksende ortalanırlar

baseline: Elemanlar kendi baseline'larına göre hizalanırlar

BasParmak

27.06.2020 18:11

Bu soru henüz yanıtlanmamış.

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
CSS Flexbox align-items Özelliği Nedir ve Nasıl Kullanılır?

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.