Etiket: content

CSS justify-content

justify-content :

Elementleri ana obje içerisinde yatay olarak hizalanmasını sağlar.

Örnek

#justify {
    width: 300px;
    height: 200px;
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    display: flex;
    justify-content: space-around;
}

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

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
flex-start Elementler ana objenin başında konumlandırılmıştır
flex-end Elementler ana objenin sonunda konumlandırılmıştır.
center Elementler ana objenin ortasında konumlandırılmıştır.
space-between Elementler ana objenin kenarlarından hizalanır
space-around Elementler kenarlara bitişik olmayacak şekilde hizalanır.
İnital
İnherit

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

CSS content

Content :

Bir elementin öncesine(before) veya sonrasına(after) css ile bir içerik oluşturmak için kullanılır. Content: ‘’ şeklindeki ifadenin içerisi doldurularak yada boş bırakılarak oluşturmak mümkün olacaktır. Oluşturacağımız içeriğe göre değişkenlik gösterir.

Örnek

p a:after {
  content:" (" attr(href) ")";
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
auto Belirtilirse hiçbir özellik kazanmaz. Varsayılan değeridir.
none Belirtilmiş içeriğe hiçbir değer vermez.
counter
attr Elementin attr’sini seçilebilir olmasını sağlar.
string Belirlediğimiz metnin içeriğini belirler.
Open-quote Belirlediğimiz elementi ya da metni tırnak başlangıç noktasını belirler.
Close-quote Belirlediğimiz elementi ya da metni tırnak bitiş noktasını belirler.
No-open-quote Belirtilmişse içerikten açılış teklifi kaldırır
url Elementin öncesine veya sonrasına bir url değişkeni yükler. Yani resim atmanıza imkan sağlar.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 8.0 1.0 4.0
Posted on by Samed GÖZÜTOK 0