PHP前端开发

使用 CSS 将容器开头的 Flex 项目对齐

百变鹏仔 4周前 (09-19) #CSS
文章标签 容器

使用带有值flex-startjustify-content属性在开头对齐弹性项目。

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

示例

现场演示

<!DOCTYPE html><html>   <head>      <style>         .mycontainer {            display: flex;            background-color: red;            justify-content: flex-start;         }         .mycontainer > div {            background-color: orange;            text-align: center;            line-height: 60px;            font-size: 30px;            width: 100px;            margin: 5px;         }      </style>    </head>   <body>      <h1>Result</h1>      <div class = "mycontainer">         <div>Rank1</div>         <div>Rank2</div>         <div>Rank3</div>         <div>Rank4</div>      </div>   </body></html>