Etiket: stretch

CSS3 font-stretch

font-stretch :

Bu font özelliği metni daha geniş veya dar yapmanıza olanak verir.

Örnek

.font {
  font-stretch: condensed;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
ultra-condensed Metni ultra daraltır.
extra-condensed Metni extra daraltır.
condensed Metni daraltır.
semi-condensed Metni normalden biraz daha daraltır.
normal Metne normal değerini verir.
semi-expanded Metni normal değerden biraz daha genişletir.
expanded Metni genişletir.
extra-expanded Metni extra genişletir.
ultra-expanded Metni ultra genişletir.
İnital
İnherit

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

CSS align-items

align-items:

Obje içindeki nesneleri kenarlardan itibaren dikey ortalama yapar.

Örnek:

div {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

 

See the Pen RWyOOJ by W3TR (@w3tr) on CodePen.

CSS Sözdizimi

 

Değer Açıklama Örnek
stretch  Öğeler ana objeye sığacak kadar uzatılır.
center  Öğeler ana objenin merkezine konumlandırılır.
flex-start  Öğeler ana objenin başında konumlandırılır.
flex-end  Öğeler ana objenin sonunda konumlandırılır.
Baseline  Öğeler ana objenin başında konumlandırılır. .
initial  Varsayılan değerine bu özelliğini ayarlar.
inherit  Bir üst elementinin değerini alır.(Kalıtsallık)

Tarayıcı Desteği

 
21.0 20.0 11.0 7.0 -webkit 12.1
Posted on by Samed GÖZÜTOK 0

CSS align-content

align-content:

Ana objenin içindeki diğer objeleri dikey eksen üzerinde hizalamasını yapar.

Not: Bu özelliğin etki etmesi için ana obje içindeki nesnelerin birden fazla olması gerekmektedir.

Örnek :

div {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}

See the Pen CSS align-content: stretch ; by W3TR (@w3tr) on CodePen.

CSS Sözdizimi

Değer Açıklama Örnek
stretch Öğeler ana objenin içine sığacak şekilde sıralanır. İlk öğe en üst konuma bitişik başlar.
center Öğeler ana objenin merkezine konumlandırılır.
flex-start Öğeler ana objenin başında konumlandırılır. Hepsi ardı ardına sıralanır.
flex-end Öğeler ana objenin sonunda konumlandırılır. Hepsi ardı ardına sıralanır.
space-between Öğeler üst ve alt kısımlar öncelik olmak üzere konumlandırılır. Bu iki öğe için üst ve alt 3 öğe için üst alt ve orta kısımlara konumlandırılırlar.
space-around Öğeler obje içerisinde eşit olarak dikey olarak ortalanırlar.

Tarayıcı Desteği
21.0 -webkit 28.0 11.0 9.0
7.0 -webkit		 12.10
Posted on by Samed GÖZÜTOK 0