Flexible CSS-Eigenschaft „align-items' für flexible Boxmodelle
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>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. |
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Machen Sie Ihren ersten Seltsamen -Sufle -Übergang
Mar 15, 2025 am 11:08 AM
Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Show, Don ' Tell
Mar 16, 2025 am 11:49 AM
Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Erstellen Sie Ihr eigenes Bragdoc mit ELEITY
Mar 18, 2025 am 11:23 AM
Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.
Vue 3
Apr 02, 2025 pm 06:32 PM
Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.
Ein bisschen auf CI/CD
Apr 02, 2025 pm 06:21 PM
Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:
Verwenden wir (x, x, x, x), um über Spezifität zu sprechen
Mar 24, 2025 am 10:37 AM
Ich habe mich neulich mit Eric Meyer unterhalten und erinnerte mich an eine Eric Meyer -Geschichte aus meinen prägenden Jahren. Ich habe einen Blog -Beitrag über CSS -Spezifität geschrieben, und
