CSS flex Eigenschaft

定义和用法

flex 是以下属性的简写属性：

flex 设置的是弹性项目的弹性长度。

注释：如果元素不是弹性项目，则 flex 属性无效。

另请参阅：

教程： CSS-Flexbox

Referenz:CSS flex-basis Eigenschaft

Referenz:CSS flex-direction Eigenschaft

Referenz:CSS flex-flow Eigenschaft

Referenz:CSS flex-grow Eigenschaft

Referenz:CSS flex-shrink Eigenschaft

Referenz:CSS flex-wrap Eigenschaft

Referenz:HTML DOM flex-Eigenschaft

Beispiel

Machen Sie die Länge aller flexiblen Elemente gleich, egal was ihr Inhalt ist:

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

Selbst ausprobieren

CSS-Syntax

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

Eigenschaftswert

Wert Beschreibung
flex-grow Zahl, die die Expansion des Elements im Vergleich zu den anderen flexiblen Elementen bestimmt.
flex-shrink Zahl, die die Kontraktion des Elements im Vergleich zu den anderen flexiblen Elementen bestimmt.
flex-basis

Länge des Elements.

Gültige Werte: "auto", "inherit", oder Werte in Einheiten wie "%", "px", "em" oder anderen Längenunterschieden.
auto Äquivalent zu 1 1 auto.
initial Äquivalent zu 0 1 auto. Siehe initial.
none Äquivalent zu 0 0 auto.
inherit Erbt diese Eigenschaft von ihrem übergeordneten Element. Siehe inherit.

Technische Details

Standardwert: 0 1 auto
Vererbung: Nein
Animationserstellung: Unterstützt. Bitte sehen Sie sich die separaten Eigenschaften an. Siehe:Animationsspezifische Attribute.
Version: CSS3
JavaScript-Syntax: object.style.flex="1"

Mehr Beispiele

Verwenden Sie flex und Media Queries, um verschiedene Layouts für verschiedene Bildschirmgrößen/Geräte zu erstellen:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* Responsive Layout - Erstellen Sie eine Einzelspaltenlayout (100%) anstatt eines Zweispaltenslayouts (50%) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

Selbst ausprobieren

Browser-Unterstützung

Die Zahlen in der Tabelle verweisen auf die erste Browser-Version, die die Eigenschaft vollständig unterstützt.

Zahlen, die mit -webkit-, -ms- oder -moz- versehen sind, stellen die erste Version dar, die den Präfix verwendet.

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