css align-items-Attribut wird verwendet, um die Ausrichtung von Elementen im Float-Container in der horizontalen Achsenrichtung anzugeben. Seine Syntax lautet „align-items: stretch|center|flex-start|flex-end|baseline ;" .
css align-items-Attribut wird verwendet, um die Ausrichtung von Elementen im Float-Container in der horizontalen Achsenrichtung anzugeben: Strecken, um den Container zu füllen, zentriert auf der horizontale Achse, oben vertikal ausgerichtet, unten vertikal ausgerichtet und an der Grundlinie der horizontalen Achse ausgerichtet. [Video-Tutorial-Empfehlung: CSS-Tutorial]
CSS-Attribut „align-items“
align-items-Attribut ist „Flexible Box“. Untereigenschaft des Layoutmoduls.
Funktion: definiert das Standardverhalten (Ausrichtung) für die Anordnung flexibler Elemente entlang der horizontalen Achse der aktuellen Zeile.
Hinweis: Sie können das Attribut align-self in jedem Unterelement innerhalb des Float-Containers verwenden, um den Stil des Attributs align-items zu überschreiben.
Syntax:
align-items: stretch|center|flex-start|flex-end|baseline;
Stretch (Standard): Dehnen, um den Container zu füllen (unter Berücksichtigung der Mindestbreite/Maximalbreite).
Mitte: Elemente werden standardmäßig auf der horizontalen Achse zentriert. Die horizontale Achse ist vertikal, was bedeutet, dass Flexbox-Elemente vertikal zentriert werden.
Flex-Start: Elemente werden am Anfang der horizontalen Achse ausgerichtet, d. h. Elemente werden vertikal oben ausgerichtet.
flex-end: Die Elemente werden am Ende der horizontalen Achse ausgerichtet, d. h. die Elemente werden unten vertikal ausgerichtet
Grundlinie: Elemente werden an der Grundlinie der horizontalen Achse ausgerichtet, d. h. die Flexbox-Elemente richten sich selbst so aus, dass die Grundlinie ihres Textes entlang der horizontalen Linie ausgerichtet ist.
Verwendungsbeispiel des CSS-Attributs align-items
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
float: left;
}
.flex-start {
-webkit-align-items: flex-start;
align-items: flex-start;
}
.flex-end {
-webkit-align-items: flex-end;
align-items: flex-end;
}
.flex-end li {
background: gold;
}
.center {
-webkit-align-items: center;
align-items: center;
}
.center li {
background: deepskyblue;
}
.baseline {
-webkit-align-items: baseline;
align-items: baseline;
}
.baseline li {
background: lightgreen;
}
.stretch {
-webkit-align-items: stretch;
align-items: stretch;
}
.stretch li {
background: hotpink;
}
.flex-item {
background: tomato;
padding: 5px;
width: 50px;
margin: 5px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<ul class="flex-container flex-start">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container flex-end">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container center">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container baseline">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container stretch">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
</div>
</body>
</html>Rendering:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !
Das obige ist der detaillierte Inhalt vonWie verwende ich das CSS-Attribut „align-items'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Ein früher Blick auf die Vue 3 -Kompositions -API in freier WildbahnApr 14, 2025 am 10:13 AMIch hatte kürzlich die Gelegenheit, die neue Vue -Kompositions -API in einem echten Projekt auszuprobieren, um zu überprüfen, wo sie nützlich sein könnte und wie wir sie in Zukunft verwenden könnten.
Ein bisschen Spaß mit benutzerdefinierten Fokusstilen habenApr 14, 2025 am 10:11 AMJeder Front-End-Entwickler hat sich mit diesem Szenario befasst oder wird sich umgehen: Ihr Chef, Kunde oder Designer ist der Ansicht, dass die Umrisse von Browsern auf fokussierten Elementen angewendet werden
Schließlich wird es einfach sein, die Farbe der Listenkugeln zu ändernApr 14, 2025 am 10:09 AMIn meinen Keimjahren war der allgemeine Rat:
Vereinfachte Fluid -TypografieApr 14, 2025 am 10:07 AMDie Fluid-Typografie ist die Idee, dass sich die Schriftgröße (und möglicherweise andere Attribute vom Typ, wie z. Der Kerntrick stammt aus Ansichtsfenster. Sie können buchstäblich setzen
Der Denkprozess hinter einem Flexbox -LayoutApr 14, 2025 am 10:05 AMIch muss nur zwei Kisten nebeneinander setzen und ich höre, dass Flexbox gut in solchen Sachen ist.
Favicons dunkler ModusApr 14, 2025 am 10:03 AMOooo! Ein bonafide Trick von Thomas Steiner. Chrome wird bald SVG Favicons (z. B.) unterstützen. Und Sie können CSS in ein SVG mit a einbetten
Wir haben Webentwickler gefragt, dass wir bewundern: 'Was ist mit dem Erstellen von Websites haben Sie dieses Jahr interessiert?'Apr 14, 2025 am 09:57 AMZum ersten Mal hier auf CSS-Tricks werden wir eine Post-of-Year-Serie von Posts durchführen. Wie ein Adventskalender -Riff schau uns nur an, wir schlagen die
Pac-Man ... in CSS!Apr 14, 2025 am 09:53 AMSie alle kennen das berühmte Pac-Man-Videospiel, oder? Das Spiel macht Spaß und der Bauen eines animierten Pac-Man-Charakters in HTML und CSS macht genauso Spaß! Ich werde Ihnen zeigen, wie es geht
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
ZendStudio 13.5.1 Mac
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver Mac
Visuelle Webentwicklungstools
SecLists
SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.
VSCode Windows 64-Bit-Download
Ein kostenloser und leistungsstarker IDE-Editor von Microsoft
Dreamweaver CS6
Visuelle Webentwicklungstools
