Home >Web Front-end >CSS Tutorial >Use CSS to display the flex line at the end of the container
Use CSS to display the flex line at the end of the container
- 王林forward
- 2023-09-07 12:41:02992browse
Use the align-content property and set the value to flex-end to set the flex row at the end.
Example
You can try running the following code to achieve flex-endvalue
Online demonstration
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 200px;
background-color: blue;
align-content: flex-end;
flex-wrap: wrap;
}
.mycontainer > div {
background-color: orange;
text-align: center;
line-height: 60px;
font-size: 30px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Queue</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
<div>Q7</div>
<div>Q8</div>
</div>
</body>
</html>The above is the detailed content of Use CSS to display the flex line at the end of the container. For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：The use of transition style attributes in CSSNext article：The use of transition style attributes in CSS