CSS esnek yön Özellik

Örnek

<div> öğesi içindeki esnek öğelerin yönünü ters sırada ayarlayın:

div {
display: flex;
flex-direction: row-reverse;
}

İpucu: Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.

Tanım ve Kullanım

Özellik flex-direction, esnek öğelerin yönünü belirtir.

Not: Öğe esnek bir öğe değilse, flex-directionözelliğin hiçbir etkisi yoktur.

Varsayılan değer:	sıra
Miras:	Hayır
canlandırılabilir:	Hayır. Canlandırılabilir hakkında bilgi edinin
Sürüm:	CSS3
JavaScript sözdizimi:	nesne .style.flexDirection="sütun-ters"

Tarayıcı Desteği

Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

-webkit- veya -moz- tarafından takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.

Property
flex-direction	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

CSS Sözdizimi

Mülk değerleri

Value	Description	Play it
row	Default value. The flexible items are displayed horizontally, as a row
row-reverse	Same as row, but in reverse order
column	The flexible items are displayed vertically, as a column
column-reverse	Same as column, but in reverse order
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Daha fazla örnek

Örnek

Farklı ekran boyutları/cihazları için farklı bir düzen oluşturmak üzere medya sorgularıylaflex-direction birlikte kullanma :

.flex-container {
display: flex;
flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}