Heim > Artikel > Web-Frontend > Flexible CSS-Eigenschaft „align-items“ für flexible Boxmodelle

Flexible CSS-Eigenschaft „align-items“ für flexible Boxmodelle

高洛峰Original: 2017-02-23 09:58:551906Durchsuche

Beispiel

Elemente des Flexboxe388a4556c0f65e1904146cc1a846bee-Elements zentriert ausrichten:

p
{
Anzeige:flex;
ausrichten - Elemente:Mitte;
}

<!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: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

#main div {
   -webkit-flex: 1; /* Safari 6.1+ */
   flex: 1;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

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

</body>
</html>

Effektvorschau

Browserunterstützung

Die Zahl in der Tabelle gibt den ersten Browser an, der diese Attributversionsnummer unterstützt.

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

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

7.0 -webkit-12.1

Definition und Verwendung

Das align-items-Attribut definiert die Ausrichtung von Flex-Elementen in der Querachsenrichtung (vertikale Achse) der aktuellen Zeile des Flex-Containers.

Tipp: Die Eigenschaft align-items kann mit der Eigenschaft align-self jedes Flex-Objektelements überschrieben werden.

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

CSS-Sprache

Attributwert

Wert	Beschreibung	Test
Strecken	Standardwert. Die Gegenstände werden so gedehnt, dass sie in den Behälter passen.	Effektvorschau
Mitte	Artikel befindet sich in der Mitte des Behälters.	Effektvorschau
Flex-Start Das Element	befindet sich am Anfang des Containers.	Effektvorschau
Flex-Ende Der Artikel	befindet sich am Ende des Containers.	Effektvorschau
Grundlinie	Elemente befinden 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 Attribut align-items beachten Sie bitte 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-Align-Self-EigenschaftNächster Artikel：Flexible flexible Box-Modell-CSS-Align-Self-Eigenschaft

In Verbindung stehende Artikel

Mehr sehen