css align-items attribute is used to specify the alignment of items in the float container in the horizontal axis direction. Its syntax is "align-items: stretch|center|flex-start|flex-end|baseline;" .
css align-items property is used to specify the alignment of items in the float container in the horizontal axis direction: stretch to fill the container, centered on the horizontal axis , vertically aligned at the top, vertically aligned at the bottom, and aligned at the baseline of the horizontal axis. [Video tutorial recommendation: CSS tutorial]
CSS align-items attribute
align-items attribute is Flexible Box Subproperty of the layout module.
Function: Defines the default (alignment) behavior of how to arrange flexible items along the horizontal axis of the current row.
Note: You can use the align-self attribute in each sub-item within the float container to override the style of the align-items attribute.
Syntax:
align-items: stretch|center|flex-start|flex-end|baseline;
stretch (default): Stretch to fill the container (still respecting min-width/max-width).
center: Items are centered on the horizontal axis; by default, the horizontal axis is vertical, which means flexbox items will be vertically centered.
flex-start: Items are aligned at the start of the horizontal axis, i.e. items will be vertically aligned at the top.
flex-end: The items are aligned at the end of the horizontal axis, i.e. the items will be vertically aligned at the bottom
baseline: Items are aligned at the baseline of the horizontal axis, i.e. the flexbox items will align themselves so that the baseline of their text is aligned along the horizontal line.
Usage example of CSS align-items attribute
<!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:
The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !
The above is the detailed content of How to use css align-items attribute?. For more information, please follow other related articles on the PHP Chinese website!
Blue Beanie Day 2019Apr 13, 2025 am 09:25 AMNovember 30th, the official "Blue Beanie Day," has come and gone. I'm not sure I ever grokked the exact spirit of it, but I've written about what it means to
Raw GraphQL QueryingApr 13, 2025 am 09:22 AMGraphQL has all kinds of awesome tooling built around it. But like everything on the web, it ultimately comes down to data shootin' across the ol' network and
PSA: It's That Time to Update the Copyright Year on Your SiteApr 13, 2025 am 09:21 AMEvery year about this time I see articles going around reminding people how to update the copyright on their websites. Usually somewhere in the footer. You
Embedded Content in MarkdownApr 13, 2025 am 09:12 AMMarkdown supports HTML, so if you need to, say, embed a YouTube video, you can just copy and paste the embed code from them, drop it into a Markdown document,
What We're Reading, 2019Apr 13, 2025 am 09:10 AMThere are so, so, so (so) many things to read out there on the internet. So many, in fact, that it's difficult to keep up with everything.
How We Tagged Google Fonts and Created goofonts.comApr 12, 2025 pm 12:02 PMGooFonts is a side project signed by a developer-wife and a designer-husband, both of them big fans of typography. We’ve been tagging Google
Timeless Web Dev ArticlesApr 12, 2025 am 11:44 AMPavithra Kodmad asked people for recommendations on what they thought were some of the most timeless articles about web development that have changed their
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
SublimeText3 Mac version
God-level code editing software (SublimeText3)
