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

See the Pen <a href='http://codepen.io/w3tr/pen/QjXpbm/'>flex-flow</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

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 26 Kasım 201531 Ağustos 2016 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

See the Pen <a href='http://codepen.io/w3tr/pen/RWzpwR/'>flex-direction</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

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 26 Kasım 201531 Ağustos 2016 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

See the Pen <a href='http://codepen.io/w3tr/pen/rOEjXo/'>flex-basis</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

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 26 Kasım 201529 Ağustos 2016 by Samed GÖZÜTOK 0

CSS background

background :

Objenin arkaplan ayarlarının yapılmasını sağlar ve aşağıdaki özelliklerde kullanılır ve her birinin ayrı parametreleri vardır.

Örnek

p {
  background: blue;
  color: white;
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/bVPGQR/">background</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

Css Sözdizimi

Değer	Açıklama
background-color	Arka plan rengini belirlemek için kullanılır.
background-image	Arka plana görüntü eklemek için kullanılır.
background-position	Arka plandaki görüntünün konumunu belirlemek için kullanılır.
background-size	Arka plandaki görüntünün boyutunu belirlemek için kullanılır.
background-repeat	Arka plandaki görüntünün tekrar etmesi gerektiğini belirtmek için kullanılır.
background-origin	Arka plandaki görüntünün konumlandırılacağı alanı belirtmek için kullanılır.
background-clip	Arka plandaki görüntünün boyama alanını belirtmek için kullanılır.
background-attachment	Arka plandaki görüntü sayfanın geri kalanında sabit veya hareketli olacağını belirtmek için kullanılır.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	3.5

Posted on 25 Kasım 20154 Mayıs 2016 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

See the Pen <a href="http://codepen.io/w3tr/pen/VvOOzd/">flex</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

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 25 Kasım 20155 Mayıs 2016 by Samed GÖZÜTOK 0

CSS empty-cells

empty-cells :

Tablodaki boş hücreler için arka plan ve kenarlık özelliklerinin uygulanıp uygulanmayacağını belirlemek için kullanılır.

Örnek

table {
  empty-cells: hide;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/epaaZZ/'>empty-cells</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
show	kenarlık ve arka plan özellikleri tüm hücrelere uygulanır. Bu varsayılan değerdir.
hide	arka plan ve kenarlık özellikleri boş hücrelere uygulanmaz
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	8.0	1.2	4.0

Posted on 25 Kasım 20153 Ekim 2016 by Samed GÖZÜTOK 0

CSS display

display :

Bir html öğesi için kullanılan kutu türünü belirtmek için kullanılır.

Örnek

p {
  display: inline-block;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/qOGwoa/'>display</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
inline	satır içi element olarak görüntülenir.
block	blok elementi olarak görüntülenir.
flex	esnek bir blok elementi olarak görüntülenir.
inline-block	satır içi blok elementi olarak görüntülenir.
inline-flex	satır içi esnek element olarak görüntülenir.
inline-table	satır için tablo elementi olarak görüntülenir.
list-item	liste elementi olarak görüntülenir.
run-in	satır içi veya blok element olarak görüntülenir.
table	tablo elementi olarak görüntülenir.
table-caption	caption elementi olarak görüntülenir.
table-column-group	Colgroup elementi olarak görüntülenir.
table-header-group	Thead elementi olarak görüntülenir.
table-footer-group	tfoot elementi olarak görüntülenir.
table-row-group	tbody elementi olarak görüntülenir.
table-cell	td elementi olarak görüntülenir.
table-column	col elementi olarak görüntülenir.
table-row	tr elementi olarak görüntülenir.
none	element görüntülenmez.
İnital
İnherit

Tarayıcı Desteği


4.0	3.0	8.0	3.1	7.0

Posted on 25 Kasım 201518 Ağustos 2016 by Samed GÖZÜTOK 0

CSS direction

direction :

Metinin yazma yönünü belirlemek için kullanılır.

Örnek

.direction {
  direction: rtl;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/JYqVbd/'>direction</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
ltr	Yazma yönünün soldan sağa olduğunu belirtmek için kullanılır.
rtl	Yazma yönünün sağdan sola olduğunu belirtmek için kullanılır.
İnital
İnherit

Tarayıcı Desteği


2.0	1.0	5.5	1.3	9.2

Posted on 25 Kasım 20152 Eylül 2016 by Samed GÖZÜTOK 0

CSS cursor

cursor :

Elementin üzerine gelince görüntülenecek olan imlecin tipini belirtmek için kullanılır.

Örnek

span {
  cursor: pointer;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/zvQvdy/'>cursor</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
İnital
İnherit

Tarayıcı Desteği


4.0	2.0	8.0	3.1	9.6

Posted on 23 Kasım 201525 Kasım 2015 by Samed GÖZÜTOK 0

CSS counter-reset

Counter-reset :

Bir veya birden fazla sayaç değerini sıfırlar.

Örnek

h3 {
  counter-reset: subsection;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/NGVGpg/'>counter-reset</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
none	hiç bir sayaç sıfırlama değeri almaz.
name	Hangi sayaç sıfırlanacağı isim ile belirlenir.
number	Hangi sayacın sıfırlanacağı numara ile ayarlanır.
İnital
İnherit

Tarayıcı Desteği


4.0	2.0	8.0	3.1	9.6

Posted on 23 Kasım 201525 Kasım 2015 by Samed GÖZÜTOK 0

HTML, CSS

flex-flow :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

flex-direction :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

flex-basis :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

background :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

flex :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

empty-cells :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

display :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

direction :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

cursor :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

Counter-reset :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği