Community Learn Tools Library Leisure

English

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

王林

Release： 2023-09-07 12:41:02

forward

1006 people have browsed it

使用 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>

Copy after login

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!

source：tutorialspoint.com

Previous article：The use of transition style attributes in CSS Next article：How do you create a box filled with color in HTML/CSS?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn