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