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

百变鹏仔 3个月前 (09-20) #CSS

文章标签末尾

使用align-content属性并设置值为 flex-end，将弹性行设置在末尾。

示例

您可以尝试运行以下代码来实现 flex-end值

在线演示

<!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>

文章推荐

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

示例

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写