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

ID:13599 / 打印

使用 css 将容器开头的 flex 项目对齐

使用带有值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>
上一篇: 学习CSS3的flexbox知识,如何快速排列网页元素?
下一篇: 如何使用CSS3的fit-content属性实现水平对齐

作者:admin @ 24资源网   2024-10-18

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。