CSS flex ιδιότητα

Ορισμός και χρήση

Το flex είναι συντομευμένη μορφή των παρακάτω ιδιοτήτων:

Το flex ορίζει τη διαδραστική μήκος των ελαστικών στοιχείων.

Αναγνωριστικά:Αν το στοιχείο δεν είναι ένα ελαστικό στοιχείο, η ιδιότητα flex είναι άκυρη.

Για περισσότερες πληροφορίες, δείτε:

Εκμάθηση: CSS Flexible Box

Reference:CSS flex-basis ιδιότητα

Reference:CSS flex-direction ιδιότητα

Reference:CSS flex-flow ιδιότητα

Reference:CSS flex-grow ιδιότητα

Reference:CSS flex-shrink ιδιότητα

Reference:CSS flex-wrap ιδιότητα

Reference:HTML DOM flex property

Example

Make all flexible items have 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;

Property Value

Value Description
flex-grow Number, specifies the growth of the item relative to the other flexible items.
flex-shrink Number, specifies 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 - make 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

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

The numbers with -webkit-, -ms-, or -moz- prefixes indicate the first version using the prefix.

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