CSS FLEX ELEMAN ÖZELLİKLERİ

Merhaba..

Flex özelliği verilmiş bir kapsayıcı içindeki elemanlar FLEX ELEMANLAR olarak adlandırılır. KApsayıcının aldığı flex öxellikleri dışında bu elemanlarda flex yapı içerisinde bazı özellikler alabilir..

FLEX ELEMAN ÖZELLİKLERİ

Flex eleman özellikleri inceleyebilmek için , bir container ve içinde div'leri oluşturalım. Bu yapıda Divler birer Flex Eleman olacaktır.

CSS

section{ display:flex; }

div { width:100px; height:100px;}

div:nth-child(1) {  background-color:orange; }
div:nth-child(2) {  background-color:skyblue; }
div:nth-child(3) {  background-color:pink; }
div:nth-child(4) {  background-color:yellow; }

HTML

<section>   
    <div> 1 </div>
    <div> 2 </div>
    <div> 3 </div>
    <div> 4 </div>
</section>

EKRAN

Normalde alt alta yerleşmesi gereken divler, kapsayıcı SECTION etiketinin FLEX yapıda olmasından dolayı yanyana sıralanırlar.

ORDER (SIRALAMA)

Flex  kapsaycıı içindeki elemanların sıralarını belirler. Herhangi bir "order" değeri eklenmez ise , flex elemanlar HTML'de yazıldıkları sırada görüneceklerdir.

HTML'de 1. 2. 3. 4. şeklinde sıralanan DİVLERİ , order özellikleri eklereyek  3. DİV 2.DİV 1.DİV 4.DİV şeklinde sıralayalım.  

CSS

div:nth-child(1) { background-color:orange; order:3}
div:nth-child(3) { background-color:skyblue; order:2}
div:nth-child(1) { background-color:pink; order:1}
div:nth-child(3) { background-color:yellow; order:4}

EKRAN

Yukarıda flex elemanlar , ORDER özellikleri alarak HTML'deki sıralanlamarından farklı şekilde sıralanmış olur..

ORDER : 1  /  ORDER : -1

Eğer tüm elemanlara order değeri verilmez ise , pozitif order değeri alan eleman en sona , negatif order değeri alan eleman ise en başa yerleşir...

CSS

div:nth-child(1) {  background-color:orange;  }
div:nth-child(2) {  background-color:skyblue; order:1 }
div:nth-child(3) {  background-color:pink; }
div:nth-child(4) {  background-color:yellow; order:-1  }

EKRAN

Yukarıda ORDER: -1 özelliği alan SARI div en başa yerleşirken , ORDER : 1 özelliği alan MAVİ div ise en sona yerleşecektir..

ORDER özelliğinin işlemesi için elemanların mutlaka FLEX ELAMAN olması gerekir. Yani elemanlar FLEX özelliği verilmiş bir kapsayıcı içerisinde olmaldır..

FLEX-GROW (ELEMAN GENİŞLETMEK)

FLEX-GROW ile flex kapsayıcı içindeki elemanların kaplayacakları alan, genişlik verilmeden ayarlanabilir. GROW, yerleşim oranını belirler.

GROW değeri verilmeyen elemanlar , içerikleri kadar genişlik alırlar iken , GROW değeri verildiğinde , verilen ölçek sayısına  göre elemanların kaplayacağı alan artar yada azalır. 

GROW ile negatif değer kullanılmaz ancak ondalıklı değerler kullanılabilir. 

TÜM ELEMANLARIN GROW DEĞERİ ALMASI

Flex kapsayıcı içerisinde tüm elemanlara GROW değerleri verilirse, satır içerisinde grow değerleri oranında yayılırlar. Ancak elemanların önceden tanımlı genişlikleri satırı hali hazırda kaplıyorsa GROW değerleri etkili olmayacaktır.

CSS

section{display:flex;}
		
div { height:100px; padding: 1rem;}		
div:nth-child(1) { background-color:orange;flex-grow:1}
div:nth-child(2) { background-color:skyblue;flex-grow:3}
div:nth-child(3) { background-color:pink;flex-grow:5}
div:nth-child(4) { background-color:yellow; flex-grow:7}

HTML

<section>   
		<div> 1 <br>GROW 1 </div>
		<div> 2 <br>GROW 3</div>
		<div> 3 <br>GROW 5</div>
		<div> 4 <br>GROW 7</div>
</section>

EKRAN

GROW ile ELEMAN GENİŞLİKLERİ

Yukarıda genişlik değeri verilmeyen div'ler , GROW değerlerine göre oranlanarak  satır içinde yayılmış olurlar.. Burada divlere önceden atanan bir genişlik değerinin olmadığına dfikkat edin. 

GROW değerlerinin yerleşime etki edebilmesi için , elemanların mevcut genişliklerinin yerleşim satırına doldurmaması gerekir..

TEK BİR ELEMANIN GROW DEĞERİ ALMASI

Flex elemanlardan en az birine GROW değeri verilirse, elemanların mevcut genişlilkleri tüm satırı kaplamıyorsa  GROW değeri alan eleman satırın kalan boşluğuna yayılacaktır..

CSS

section{display:flex;}
		
div { height:100px; padding: 1rem;}		
div:nth-child(1) { background-color:orange; }
div:nth-child(2) { background-color:skyblue }
div:nth-child(3) { background-color:pink }
div:nth-child(4) { background-color:yellow; flex-grow:7}

HTML

<section>   
		<div> 1 <br>GROW YOK </div>
		<div> 2 <br>GROW YOK </div>
		<div> 3 <br>GROW YOK </div>
		<div> 4 <br>GROW 7</div>
</section>

EKRAN

TEK BİR ELEMANIN GROW DEĞERİ ALMASI

Yukarıda genişlik değeri verilmeyen div'ler ,  içerikleri kadar genişlik değeri alırken , GROW değeri verilen SARI div satırın kalan genişliğine yayılır. Bu duruma özgü olarak verilen grow sayısının bir önemi olmaz. Sayı ne olursa olsun tek bir eleman grow değeri aldığı için , satırın kalan boşuğuna tamamen yayılacaktır...

FLEX-SHRINK (ELEMAN DARALTMAK)

FLEX-SHRINK ile flex kapsayıcı içindeki elemanların kaplayacakları alan daraltılabilir SHRINK ile elemanların genişliklerinin daraltılbilmesi için , elemanların mevcut genişliklerinin , tüm satırı kaplaması gerekir..

SHRINK ile negatif değer kullanılmaz ancak ondalıklı değerler kullanılabilir. 

CSS

section{display:flex;}
		
div { height:100px; padding: 1rem; width:40% }		
div:nth-child(1) { background-color:orange;   }
div:nth-child(2) { background-color:skyblue;  }
div:nth-child(3) { background-color:pink;   }
div:nth-child(4) { background-color:yellow;  flex-shrink: 3}

HTML

	<section>   
		<div> 1 <br>SHRINK YOK </div>
		<div> 2 <br>SHRINK YOK </div>
		<div> 3 <br>SHRINK YOK </div>
		<div> 4 <br>SHRINK 3</div>
	</section>

EKRAN

SHRINK ile ELEMAN DARALTMA

Yukarıda önceden tanımlı genişlik değeri alan  div'ler , satır genişliğine göre yerleşirken , shrink değeri verilen PEMBE div mevcut genişiliğinin 3'te 1'ine daraltılmış  olur..

FLEX-BASIS (ELEMAN İLK GENİŞLİK)

FLEX-BASIS ile flex kapsayıcı içindeki elemanların ilk genişlik değerleri belirlenebilir. Varsayılan değeri "auto" dur..

CSS

section{display:flex;}
		
div { height:100px; padding: 1rem; width:40% }		
div:nth-child(1) { background-color:orange;   }
div:nth-child(2) { background-color:skyblue;  }
div:nth-child(3) { background-color:pink;   }
div:nth-child(4) { background-color:yellow;  flex-shrink: 3}

HTML

	<section>   
		<div> 1 <br>flex-basis:<br>50px </div>
		<div> 2 <br>flex-basis:<br>80px </div>
		<div> 3 <br>flex-basis:<br>100px </div>
		<div> 4 <br>flex-basis:<br>150px</div>
	</section>

EKRAN

FLEX-BASIS ile İLK GENİŞLİK

Yukarıda önceden tanımlı genişlik değerleri olmayan flex div'ler , aldıkları flex-basis değerleri ile genişliklerini almış olurlar..

Güncelleniyor..