So verwenden Sie die CSS-Flex-Direction-Eigenschaft-CSS-Tutorial-php.cn

So verwenden Sie die CSS-Flex-Direction-Eigenschaft

藏色散人

Freigeben： 2019-05-27 15:55:48

Original

3746 Leute haben es durchsucht

Das CSS-Attribut „Flex-Direction“ wird verwendet, um die Richtung flexibler Elemente anzugeben. Wenn das Element kein Element des Flexbox-Objekts ist, hat das Attribut „Flex-Direction“ keine Wirkung.

So verwenden Sie die CSS-Flex-Direction-Eigenschaft

Wie verwende ich das CSS-Flex-Direction-Attribut?

Definition und Verwendung

Die Flex-Direction-Eigenschaft gibt die Richtung eines Flex-Elements an.

Hinweis: Die Flex-Direction-Eigenschaft hat keine Auswirkung, wenn das Element kein Element des Flexbox-Objekts ist.

Standard: Zeile

Geerbt: Nein

Animierbar: Nein.

Version: CSS3

JavaScript-Syntax:

object.style.flexDirection="column-reverse"

Nach dem Login kopieren

CSS-Syntax

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

Nach dem Login kopieren

Eigenschaften Wert

Zeile Standardwert. Flexible Elemente werden horizontal als Reihe angezeigt.

row-reverse Das Gleiche wie row, aber in umgekehrter Reihenfolge.

Spalte Flexible Elemente werden vertikal angezeigt, genau wie eine Spalte.

column-reverse Dasselbe wie Column, aber in umgekehrter Reihenfolge.

initial setzt diese Eigenschaft auf ihren Standardwert.

inherit Erbt dieses Attribut vom übergeordneten Element.

Beispiel

Stellen Sie die Richtung der flexiblen Boxelemente innerhalb des

-Elements auf die umgekehrte Reihenfolge ein:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#main {
    width: 400px;
    height: 400px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
}

#main div {
    width: 50px;
    height: 50px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>

Nach dem Login kopieren

Ergebnis ausführen:

So verwenden Sie die CSS-Flex-Direction-Eigenschaft

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Flex-Direction-Eigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!