当前位置：文江博客话题详情

用flex如何实现以下布局？

发布于 2022-09-12 00:09:09 字数 138 浏览 13 评论 0

一个父div里面有5个子div

父div撑满屏幕宽度

5个子div分别在两行，第一行3个，第二行两个

第一行的div要中间间隔一样

第二行div要放在行尾

如何用一个flex模型来实现呢？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

仄言 2022-09-19 00:09:09

<html>
  <head>
    <title>flex</title>
  </head>
  <body>
    <div class="main">
      <ul>
        <li><div>1</div></li>
        <li><div>2</div></li>
        <li><div>3</div></li>
        <li><div>4</div></li>
        <li><div>5</div></li>
      </ul>
    </div>
  </body>
</html>

.main{
  ul{
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    list-style: none;
    padding:0;
    margin:0;
    li{
      width:30%;
      text-align:center;
      padding:0 10px;
      div{
        background:blue;
        height:50px;
      }
    }
  }
}

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

25 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文