Flexible CSS-Eigenschaft „align-items' für flexible Boxmodelle-CSS-Tutorial-php.cn

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

高洛峰

Freigeben： 2017-02-23 09:58:55

Original

1900 Leute haben es durchsucht

Beispiel

Elemente des Flexbox

-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>

Nach dem Login kopieren

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.