Etiket: flex

CSS flex-wrap

flex-wrap :

İki ve daha fazla satırdan oluşan esnek kutuların nasıl bir davranış sergileyeceğini belirlemek için kullanılır.

Not: elementin flex özelliği yoksa ,flex-wrap etkili olmaz.

Örnek

.flex {
    width: 150px;
    height: 150px;
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    display: flex;
    flex-wrap: wrap;
    background: red;
    color: white;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
nowrap Tek satırda flex ler soldan sağa sıralaması için kullanılır.
wrap İki veya daha fazla satırda flex ler soldan sağa sıralaması için kullanılır.
Wrap-reverse iki veya daha fazla satırda esnek kutular sağdan sola sıralaması için kullanılır.
İnital
İnherit
Posted on by Samed GÖZÜTOK 0

CSS flex-shrink

flex-shrink :

Flex  element içindeki diğer elementleri göre göreceli olarak nasıl büzüleceğini belirler.

Not: elementin flex özelliği yoksa ,flex-shrink etkili olmaz.

Örnek

.flex {
    width: 200px;
    height: 200px;
    display: -webkit-flex; /* Safari */
    display: flex;
    background: red;
    color: white;
    -webkit-flex-shrink: 3; /* Safari 6.1+ */
    flex-shrink: 3;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
number Elementin diğer elementlere göre ne kadar büyüyüp/küçüleceğini sayısal olarak belirtmek için kullanılır.
İnital
İnherit

Tarayıcı Desteği
29.0
21.0-webkit		 28.0
18.0-moz		 11.0
10.0-ms-		 6.1-webkit 12.10
Posted on by Samed GÖZÜTOK 0

CSS flex-grow

flex-grow :

Bu özellik sayesinde kutular kendi aralarında belirlenen oranlarda esnek olarak genişleyip küçülecektir.

Not: elementin flex özelliği yoksa ,flex-glow etkili olmaz.

Örnek

.flex{
    width: 200px;
    height: 200px;
    display: -webkit-flex; /* Safari */
    display: flex;
    background: red;
    color: white;
    -webkit-flex-grow: 5;
     flex-grow: 5;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
number Elementin diğer elementlere göre ne kadar büyüyüp/küçüleceğini sayısal olarak belirtmek için kullanılır.
İnital
İnherit

Tarayıcı Desteği
29.0
21.0-webkit		 28.0
18.0-moz		 11.0
10.0-ms-		 6.1-webkit 12.10
Posted on by Samed GÖZÜTOK 1

CSS flex-flow

flex-flow :

Flex-direction ve flex Wrap ın kısayoludur. İki özelliği tek bir tanımla tanımlama imkanı verir.

Not: elementin flex özelliği yoksa ,flex-flow etkili olmaz.

Örnek

.flex{
    width: 150px;
    height: 150px;
    display: -webkit-flex; /* Safari */
    -webkit-flex-flow: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-flow: row-reverse;
    background: red;
    color: white;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
flex-direction kapsayıcı eleman içindeki esnek kutuların sıralama yönünü belirler. row/row-reverse/column/column-reverse/initial/inherit
flex-wrap İki ve daha fazla satırdan oluşan flexlerin nasıl bir davranış sergileyeceğini belirlemek için kullanılır.
İnital
İnherit

Tarayıcı Desteği
29.0
21.0-webkit		 28.0
18.0-moz		 11.0
10.0-ms-		 6.1-webkit 12.10
Posted on by Samed GÖZÜTOK 0

CSS flex-direction

flex-direction :

Kapsayıcı eleman içindeki esnek kutuların sıralama yönünü belirler.

Not: elementin flex özelliği yoksa ,flex-direction etkili olmaz.

Örnek

.flex{
    width: 200px;
    height: 200px;
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
    background: red;
    color: white;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
row Esnek kutuları soldan sağa sıralar.
row-reverse Esnek kutuları sağdan sola sıralar.
column Esnek kutuları kolon olarak yukarıdan aşağı sıralar.
Column-reverse Esnek kutuları row-reverse gibi ama alttan yukarı sıralar.
İnital
İnherit

Tarayıcı Desteği
29.0
21.0-webkit		 28.0
18.0-moz		 11.0
10.0-ms-		 6.1-webkit 12.10
Posted on by Samed GÖZÜTOK 0

CSS flex-basis

flex-basis :

Div leri pixel olarak boyutlandırmak için kullanılır.

Not: Elementte flex özelliği yoksa flex-basis etkili olmaz.

Örnek

.flex{
    display: -webkit-flex; /* Safari */
    display: flex;
    width: 100px;
    height: 100px;
   -webkit-flex-basis: 200px; /* Safari 6.1+ */
    flex-basis: 200px;
    background: red;
    color: white;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
number Pixel olarak vereceğimiz değere göre boyutlandırır.
auto Div in boyutunu otomatik olarak ayarlar.
İnital
İnherit

Tarayıcı Desteği
29.0
21.0-webkit		 28.0
18.0-moz		 11.0
10.0-ms-		 6.1-webkit 12.10
Posted on by Samed GÖZÜTOK 0

CSS flex

flex :

Bir div içinde bazı divlerimiz var diyelim.Bunları width height vermeden hepsini içine sığacak şekilde sığdırabiliriz.İstersek genişliklerini de değiştirebiliriz. Ama bunda height hep sonuna kadar iner.Bir nevi alanı tablo gibi özellikler sağlıyor.

Örnek

.flex{
    display: -webkit-flex; /* Safari */
    display: flex;
    width: 300px;
    background: red;
    padding: 10px;
    color: white;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
flex-grow Flex-grow divlerin boyutlandırmasını yapar.Değer olarak sayıları alır.
flex-basis Flex-basis de flex-grow gibi boyutlandırma yapar,ama bu px gibi değer alarak yapar.
flex-shrink Flex-shrink değeri kadar o element diğerlerine göre fazladan daralacaktır.Varsayılan değeri 1 dir
auto ayarı 1 1 e otomatik olarak ayarlar.
none ayarı 0 0 a otomatik olarak ayarlar.
İnital
İnherit

Tarayıcı Desteği
29.0
21.0-webkit		 28.0
18.0-moz		 11.0
10.0-ms-		 6.1-webkit 12.10
Posted on by Samed GÖZÜTOK 0