Home > Article > Web Front-end > 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:02982browse

使用 CSS 显示容器末尾的伸缩线

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!

css flex

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

See more

Use CSS to display the flex line at the end of the container

Example

Related articles