Home > Article > Web Front-end > How to use css align-items attribute?
How to use css align-items attribute?
- 青灯夜游Original
- 2019-02-16 10:21:2423949browse
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!