Web实现：flex弹性布局项目换行

最新推荐文章于 2023-10-02 21:21:39 发布

jasmyn518

最新推荐文章于 2023-10-02 21:21:39 发布

阅读量208

点赞数

分类专栏：笔记 CSS HTML 文章标签：前端 css css3

本文链接：https://blog.csdn.net/jasmyn518/article/details/123275423

版权

笔记同时被 3 个专栏收录

127 篇文章 3 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

项目换行
HTML部分：

<!DOCTYPE html>
<html lang="en">
  <head>
<!--系统内置 start-->
<script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script>
<!--系统内置 end-->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./index.css" />
    <title>Flex 布局</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
    </div>
  </body>
</html>

CSS部分：

.container {
  background: #D5E8D4;
  border: 2px solid #5D9E5A;
  width: 300px;
  height: 60px;
  display: flex;
  flex-wrap: wrap;/*第一行在上方*/
  flex-wrap: wrap-reverse;/*第一行在下方*/
}

.item {
  width: 50px;
  background: #FFF2CC;
  border: 1px solid #B7A570;
  text-align: center;
}

jasmyn518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web实现：flex弹性布局项目换行

HTML部分：<!DOCTYPE html><html lang="en"> <head><script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script> <meta chars.
复制链接

扫一扫