CSS Ders-24 Flex Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Ders-24 Flex Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2507)
RAPOR ET
Css derslerimize devam ediyoruz.Bu derste flex komutlarını anlatacağım.Öncelikle işlevinden bahsedeyim.Bir div içinde bazı divlerimiz var diyelim.Bunları width height vermeden hepsini içine sığacak şekilde sığdırabiliriz.İstersek genişliklerinide değiştirebiliriz.Ama bunda height hep sonuna kadar iner.Bir nevi alanı tablo gibi özellikler sağlıyor.

İncele : http://ustaderslik.com/ornek/flex.html

Bu özellikleri kullanabilme için öncelikle içerik divlerini kapsayan alana display:flex; veriyoruz.Daha sonra içindeki divleri seçerek özellikleri uyguluyoruz.

1-flex


Flex komutu direk divlerin hepsini kapsayıcı alana sığacak şekilde eşit boyutlandırır.Flexi ana divin içindeki divlere uyguluyoruz.
flex:1;

şeklinde değer alır.

2-flex-direction


Flex-direction ana divin içindeki divlerin başlama konumunu değiştirir.Normalde değeri row dur ve soldan başlar.
row :sol
row-reverse : sağ
column :yukarı
column-reverse :aşağı
şeklinde değerleri mevcut.Flex-direction direk ana dive uyguluyoruz.
flex-direction:row-reverse;


3-flex-grow


Flex-grow divlerin boyutlandırmasını yapar.Değer olarak sayıları alır.1,2,3...
flex-grow:2;


4-flex-basis


Flex-basis de flex-grow gibi boyutlandırma yapar,ama bu px gibi değer alarak yapar.
flex-basis:75px;


Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Ustaderslik</title>
<style type="text/css">
.ana{display:flex;width:500px;height:400px;margin:auto;}
.ana div{flex:1;}

.ana2{display:flex;flex-direction:row-reverse;width:500px;height:400px;margin:auto;}
.ana2 div{flex-basis:50px;}
.ana2 .alan3{flex-basis:150px;}

.ana3{display:flex;width:500px;height:400px;margin:auto;}
.ana3 div{flex-grow:1;}
.ana3 .alan5{flex-grow:5;}

.alan1{background:#b139ab;}
.alan2{background:#6bba79;}
.alan3{background:#5eb4df;}
.alan4{background:#d74442;}
.alan5{background:#e4af5f;}
</style>
</head>
<body>

<div class="ana">
<div class="alan1">----</div>
<div class="alan2">--</div>
<div class="alan3">-------</div>
<div class="alan4">-----</div>
<div class="alan5">-----------</div>
</div><br />

<div class="ana2">
<div class="alan1">----</div>
<div class="alan2">--</div>
<div class="alan3">-------</div>
<div class="alan4">-----</div>
<div class="alan5">-----------</div>
</div><br />

<div class="ana3">
<div class="alan1">----</div>
<div class="alan2">--</div>
<div class="alan3">-------</div>
<div class="alan4">-----</div>
<div class="alan5">-----------</div>
</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/r7ad4ds7.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol