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