Heim >Web-Frontend >CSS-Tutorial >Flexible CSS-Eigenschaft „align-items' für flexible Boxmodelle
Flexible CSS-Eigenschaft „align-items' für flexible Boxmodelle
- 高洛峰Original
- 2017-02-23 09:58:551923Durchsuche
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 |
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
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit ;
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. |