返回
顶部

修改密码

首页 > 文章 > 国际 > 正文
flex布局超出宽度自动换行,换行后设置每个元素之间的间距

+1

-1

收藏

+1

-1

点赞101

评论0

标题:flex布局超出宽度自动换行,换行后设置每个元素之间的间距
详情介绍-作者:xiaowei-来源: 极全网 -如有问题点击:在线客服帮助

原来的样式

极全网图片-jiqw.com


<html>
  <header></header>
  <style>
    .a{
      background-color:aliceblue;
      display: flex;
      align-items: center;
      align-content: flex-start;
      flex-wrap: wrap;
      gap: 8px;
    }
    .a div{
      width: 200px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #000000;
    }
  </style>
  <body>
    <div class="a">
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
  </body>
</html>


添加gap之后的样式

极全网图片-jiqw.com


版权声明:本文内容由极全网实名注册用户自发贡献,版权归原作者所有,极全网-官网不拥有其著作权,亦不承担相应法律责任。具体规则请查看《极全网用户服务协议》和《极全网知识产权保护指引》。如果您发现极全网中有涉嫌抄袭的内容,点击进入填写侵权投诉表单进行举报,一经查实,极全网将立刻删除涉嫌侵权内容。

扫一扫在手机打开

评论
已有0条评论
0/150
提交
热门评论
相关推荐
换一批
热点排行