Atrybut flex w CSS

Definicja i zastosowanie

Flex jest skrótem dla następujących właściwości:

Ustawienia flex określają długość elastycznego elementu.

Komentarz:Jeśli element nie jest projektem elastycznym, to właściwość flex jest nieważna.

Inne zasoby:

Podręcznik: CSS flexible box

Reference:Atrybut flex-basis w CSS

Reference:Atrybut flex-direction w CSS

Reference:Atrybut flex-flow w CSS

Reference:Atrybut flex-grow w CSS

Reference:Atrybut flex-shrink w CSS

Reference:Atrybut flex-wrap w CSS

Reference:HTML DOM flex property

Example

Make all flexible items the same length regardless of their content:

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

Try it yourself

CSS syntax

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Attribute value

Value Description
flex-grow Number, specifying the growth of the item relative to the other flexible items.
flex-shrink Number, specifying the shrinkage of the item relative to the other flexible items.
flex-basis

Length of the item.

Valid values: "auto", "inherit", or values in units of "%", "px", "em", or any other length unit.
auto Equivalent to 1 1 auto.
initial Equivalent to 0 0 auto. See also initial.
none Equivalent to 0 0 auto.
inherit Inherits this property from its parent element. See also inherit.

Technical details

Default value: 0 1 auto
Inheritance: No
Animation creation: Supported. See separate properties. See also:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.flex="1"

More examples

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

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

Try it yourself

Browser support

Numbers in the table indicate the first browser version that fully supports this property.

Numbers in the table indicate the first browser version that fully supports this property.

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