Heim > Artikel > Web-Frontend > Flexible flexible Box-Modell-CSS-Align-Self-Eigenschaft

Flexible flexible Box-Modell-CSS-Align-Self-Eigenschaft

高洛峰Original: 2017-02-23 09:55:391864Durchsuche

Beispiel

Ein Element innerhalb des Flex-Objektelements zentriert ausrichten:

#myBluep
{
ausrichten-selbst:zentrieren;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手册网(www.shouce.ren)</title>
<style>
#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: flex-start; /* Safari 7.0+ */
    display: flex;
    align-items: flex-start;
}

#main div {
    -webkit-flex: 1; /* Safari 6.1+ */
    flex: 1;
}

#myBlueDiv {
    -webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;" id="myBlueDiv">蓝色</div>  
  <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>

<p><b>注意:</b> align-self 属性重写了容器的 align-items 属性。</p>
<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。</p>
<p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。</p>

</body>
</html>

Effektvorschau

Browser-Unterstützung

Die Die Nummer 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.

属性
				align-self	21.0	11.0
align-self	21.0	11.0	20.0	9.0 7.0 -webkit-	12.1

7.0 -webkit-12.1

Definition und Verwendung

align-self-Attribut definiert die Ausrichtung von Flex-Elementen einzeln in Richtung der Querachse (vertikale Achse). .

Hinweis: Das Attribut align-self kann das Attribut align-items des flexiblen Containers überschreiben.

默认值：	auto
继承：	否
可动画化：	否。请参阅 CSS3动画属性、CSS3动画实例。
版本：	CSS3
JavaScript 语法：	object.style.alignSelf="center" 效果预览

CSS-Funktion

Attributwert

Wert	Beschreibung	Test
automatisch	Standardwert. Das Element erbt die Eigenschaft align-items seines übergeordneten Containers. „stretch“, wenn kein übergeordneter Container vorhanden ist.	Effektvorschau
Stretch	Das Element wird so gedehnt, dass es in den Behälter passt.	Effektvorschau
Mitte	-Element befindet sich in der Mitte des Containers.	Effektvorschau
Flex-Start Das Element	befindet sich am Anfang des Containers.	Effektvorschau
Flex-Ende Das	-Element befindet sich am Ende des Containers.	Effektvorschau
Grundlinie	-Element befindet sich an der Grundlinie des Containers.	Effektvorschau
anfänglich	Setzen Sie diese Eigenschaft auf ihren Standardwert. Siehe Initiale.	Effektvorschau
erben	Erbt diese Eigenschaft vom übergeordneten Element. Siehe erben.

Flexibleres flexibles Box-Modell-CSS für Artikel Im Zusammenhang mit dem align-self-Attribut achten Sie bitte auf die chinesische PHP-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

Vorheriger Artikel：Flexible flexible Box-Modell-CSS-Eigenschaft „justify-content“.Nächster Artikel：Flexible flexible Box-Modell-CSS-Eigenschaft „justify-content“.

In Verbindung stehende Artikel

Mehr sehen