CSS FLEX İLE YATAY HİZALAMA (JUSTIFY CONTENT)

Merhaba..

CSS Flex yapısı ile elemanlar içindeki nesneleri yatayda yada dikeyde kolayca hizalayabiliyoruz. Bunun için öncelikle kapsayıcı elemana CSS ile flex özelliği vermemiz gerekiyor.

JUSTIFY-CONTENT ÖZELLİĞİ

Kapsayıcı içindeki elemanları yatayda hizalamak için JUSTIFY-CONTENT özelliğini kullanıyoruz. Flex yapılarda varsayılan yön "row" yani yanyanadır. Justify-content bu durumda yatay hizalamada kullanılır. Ancak flex yapının yönü "column" yani yukarıdan aşağı yapılırsa , justify content bu kez dikeyde hizalama yapar. Aldığı değerler:

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

CSS

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

HTML

 
	<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. Şimdi FLEX yapıdaki yatay hizalama değerlerine bakabiliriz...

FLEX-START

Flex uygulanmış bir yapıda varsayılan yatay hizalama şeklidir. Kapsayıcı içindeki elemanlar soldan (baştan) başlayarak hizalanırlar. İçerikler kapsayıcının genişliğine uyarlanmaz...

.container { justify-content : start; }

CENTER

Justify-content özelliği center yapıldığında, kapsayıcı içindeki elemanlar soldan (baştan) başlayarak hizalanırlar. İçerikler kapsayıcının genişliğine uyarlanmaz...

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

		display: flex;
		justify-content: center;
		 
	}

FLEX-END

Justify-content özelliği end yapıldığında, kapsayıcı içindeki elemanlar sağdan (sondan) başlayarak hizalanırlar. İçerikler kapsayıcının genişliğine uyarlanmaz...

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

		display: flex;
		justify-content: end;
		 
	}

SPACE-BETWEEN

Justify-content özelliği space-between yapıldığında, kapsayıcı içindeki elemanlar kapsayıcının genişliğine uyarlanarak yerleştirilirler. İlk eleman Sol kensara , son eleman sağ kenara yerleştirilirken , diğerleri aralarında eşit boşlık kalacak şekilde yerleşirler.

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

		display: flex;
		justify-content: space-between;
		 
	}

SPACE-AROUND

Justify-content özelliği space-around yapıldığında, kapsayıcı içindeki elemanlar yine kapsayıcının genişliğine uyarlanarak yerleştirilirler. Sspace-wetween 'den farklı olarak sol ve sağ kenara yerleşen elemanlar ile bu kenalar arasında biraz boşluk bırakılır...

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

		display: flex;
		justify-content: space-around;
		 
	}

SPACE-EVENLY

Justify-content özelliği space-evenlyyapıldığında, kapsayıcı içindeki elemanlar yine kapsayıcının genişliğine uyarlanarak yerleştirilirler. between ve around'tan farklı olarak sol ve sağ kenarlar dahil tüm elemanlar arasında eşit boşluk bırakılarak yerleştirilir..

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

		display: flex;
		justify-content: space-evenly;
		 
	}

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

W3school JUSTIFY-CONTENT Demo Uygulama

HTML + CSS KODLARI

<!DOCTYPE html>
<html>
<head>
	<title>FLEX İLE YATAY ORTALAMA </title>
      <meta charset="utf-8">

	<style type="text/css">

	body {
		background-color:#222;
	}
	.container {
		width:70%;
		margin: 100px auto;
		padding: 3rem;
		border:3px solid #ccc; 
		display: flex;
	/*	justify-content: flex-start;   //sola dayalı
		justify-content: flex-end;    // ortalı
		justify-content: center;	   //sağa sayaı
		justify-content: space-between;    // genişliğe uyarlanmış , kenarlara dayalı 
		justify-content: space-around;  // genişliğe uyarlanmış , kenarlardan biraz uzak  */
		justify-content: space-evenly;    /* genişliğe uyarlanmış ,eşit aralıklı*/
		 
	}
	.box {
		border:1px solid #aaa;
		padding:1rem;
		color:#fff;
		margin:20px;
		background-color:#933;
		font-weight:bold;
		width:150px;
		height: 150px
	} 

</style>

</head>

<body>
	<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 > 
</body>

</html>

Görüşmek üzere...