Flexible flexible Box-Modell-CSS-Eigenschaft „justify-content'.-CSS-Tutorial-php.cn

Flexible flexible Box-Modell-CSS-Eigenschaft „justify-content'.

高洛峰

Freigeben： 2017-02-23 09:51:33

Original

2024 Leute haben es durchsucht

Instanz

hinterlässt Leerraum um Elemente im

-Element eines Flexbox-Objekts:

p
{
anzeige:flex;
begründen -Inhalt:Raum-rund;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手册网(www.shouce.ren)</title>
<style>
#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    display: flex;
    justify-content: space-around;
}

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

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性。</p>

</body>
</html>

Nach dem Login kopieren

Effektvorschau

Browser-Unterstützung

Die Zahl in der Tabelle gibt die Versionsnummer des ersten Browsers an, der dieses Attribut unterstützt.

Die Nummer unmittelbar nach -webkit-, -ms- oder -moz- ist die erste Version, die dieses Präfixattribut unterstützt.

justify-content

29.0

属性
justify-content	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

21.0 -webkit-

11.0

28.018.0 -moz-

17.0

Definition und Verwendung

justify-content wird verwendet, um die Ausrichtung des Flex-Box-Elements in Richtung der Hauptachse (horizontale Achse) festzulegen oder abzurufen.

Tipp: Verwenden Sie die Eigenschaft align-content, um Elemente auf der Querachse (vertikal) auszurichten.

默认值：	flex-start
继承：	否
可动画化：	否。请参阅 CSS3动画属性、CSS3动画实例。
版本：	CSS3
JavaScript 语法：	object.style.justifyContent="space-between" 效果预览

CSS-Sprache

Attributwert

Wert	Beschreibung	Test
Flex-Start	Standardwert. Der Artikel befindet sich am Anfang des Containers.	Effektvorschau
Flex-Ende Der Artikel	befindet sich am Ende des Containers.	Effektvorschau
Mitte	Artikel befindet sich in der Mitte des Behälters.	Effektvorschau
Leerzeichen dazwischen	Elemente befinden sich in einem Container mit Leerraum zwischen den Zeilen.	Effektvorschau
Raum-um	Elemente werden in Containern mit Leerzeichen vor, zwischen und nach jeder Zeile platziert.	Effektvorschau
anfänglich	Setzen Sie diese Eigenschaft auf ihren Standardwert. Siehe Initiale.	Effektvorschau
erben	Erbt diese Eigenschaft vom übergeordneten Element. Siehe erben.