CSS joustavuus-suunta ominaisuus

Määritelmä ja käyttö

flex-direction-ominaisuus määrittelee joustavien projektien suunnan.

Huomautus:Jos elementti ei ole joustava projekti, flex-ominaisuus on voimaton.

See also:

CSS tutorial:CSS flexbox

CSS reference manual:flex property

CSS reference manual:flex-basis property

CSS reference manual:flex-flow property

CSS reference manual:flex-grow property

CSS reference manual:flex-shrink property

CSS reference manual:flex-wrap property

HTML DOM reference manual:flexDirection property

Example

Set the direction of flexible items within the <div> element in the opposite order:

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

Kokeile itse

CSS syntax

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Attribute value

Value Description
row Default value. Display flexible items horizontally as a row.
row-reverse Equivalent rows, but in the opposite direction.
column As columns, display the flexible items vertically.
column-reverse Equivalent columns, but in the opposite direction.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical details

Default value: row
Inheritance: No
Animation creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.flexDirection="column-reverse"

More examples

Combine flex-direction and media queries to create different layouts for different screen sizes/devices:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Responsive layout - create a single column layout (100%) instead of a two-column layout (50%) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin.

Luvut -webkit- tai -moz- etuliitteellä osoittavat ensimmäisen version, jossa etuliite käytetään.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0