Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie die CSS-Flex-Direction-Eigenschaft

So verwenden Sie die CSS-Flex-Direction-Eigenschaft

藏色散人
藏色散人Original
2019-05-27 15:55:483750Durchsuche

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"

CSS-Syntax

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

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>

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn