5.00 / 1 oy

CSS Flexbox Justify-Content Nedir ve Nasıl Kullanılır?

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

CSS ile box-model kullanırken kod yazarken sağa/sola hizalama ya da ortalama ayarlarını yapabilmek için float ve text-align özelliklerini kullanırız ve zaman zaman olmasıı beklediğimiz sonuçları alamadığımız için saç baş yolduğumuz da olur. Flexbox kullanımının ne kadar pratik ve işlevsel olduğunu göstermek için bugün bu yazı dizisini hazırlamayı düşündüm ve flexbox konusunda yeterince bilgi sahibi olmayan ya da gözü korkan geliştiricilere biraz olsun fikir verebilmeyi umuyorum.

Şimdi flexbox ile ortalama ve hizalama işlemlerini ne kadar kolaylıkla yapabileceğimize, hatta box-model css'te elimizde olmayan seçenekleri de nasıl kullanabileceğimize bakalım.

flexbox justify-content

justify-content özelliklerini değiltirince göreceğimiz farklılıkları şu html kodları üzerinden hazırlayacağım:

<!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;display: flex; flex-direction: row; flex-wrap: nowrap;}
        .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>

Önceki örneğimizde hazırladığımız flexbox container'daki div sayısını azaltıyorum ve uzunluklarını da kısaltarak aşağıdaki forma getiriyorum. Bakalım justify-content özelliği ile bu div'leri hizalamak ve ortalamak için hangi seçeneklere sahibiz.

flexbox

CSS Flexbox justify-content seçenekleri:

flex-start: Default (varsayılan) seçenektir ve flex-direction yönünde hizalama yapar. flex-direction row olursa satır; column olursa sütun bazlı hizalama yapar.

.ust{background-color: greenyellow;display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;}flex-start

flex-end: Hizalama flex-direction'un aksi yönünde yapılır

.ust{background-color: greenyellow;display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; height: 1000px;}

flexbox align end

center: Sıralama flex-direction üzerinden orta bölgede yapılır (satır ya da sütun bazlı ortalama yapılabilir)

flexbox align center

space-between: İlk eleman en başta, son eleman da en sonda olacak şekilde ortalama ve hizalama yapar.

flexbox space-between

space-around: Elemanlar, birbirleri etrafınd eşit boşluklara sahip olacak şekilde ortalanırlar

justify-content space-around

space-evenly: Elemanlar, iki bitişik hizalama arasındaki boşluk dağıtılacak şekilde eşit olarak hizalanırlar

justify-content space-evenly

Konunun devamı için bkz: CSS Flexbox align-items Özelliği Nedir ve Nasıl Kullanılır?

BasParmak

27.06.2020 16:21

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 Justify-Content 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.