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

CSS HTML5 CSS3 Flex

flex 布局让有间隔且两端对齐

发布于 2022-09-11 15:52:11 字数 996 浏览 17 评论 0

  <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

scss 代码:

  ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li{
            flex: 0 0 24%;
            border:1px solid red;
            height: 40px;
        }
    }

如果li的数量是刚好被 4 整除是没问题的如果多了最后一个就会跑到右边
有什么办法让li的每一行的第一个左边没有距离右边也没有距离但是中间的两个是有距离的???

也试着用伪元素去解决但是伪元素会让最后一个和倒数第二个没有距离
到这里后又想着给倒数第二个加margin-right 加了之后是有办法解决但是如果li的数量刚好被4整除就会有问题....纠结啊!!!

收藏 0

分享到微博

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

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

发布评论

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

评论（6）

与酒说心事 2022-09-18 15:52:11

ul层flex左对齐
li层通过margin实现间距
第4n个右边距为0
剩下1%的边距由第4n+1个左边实现0.5%，实现左右留白间距

// 最终实现
ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;

    li {
        flex: 0 0 24%;
        margin-right: 1%;
        border:1px solid red;
        box-sizing: border-box;                
        height: 40px;
        &:nth-child(4n) {
            margin-right: 0;
        }
        &:nth-child(4n+1) {
            margin-left: 0.5%;
        }
     }
}

孤独陪着我 2022-09-18 15:52:11

把标签凑足4的倍数吧后面加几个空白标签

独自唱情﹋歌 2022-09-18 15:52:11

这个还真好不整好，要么是多加几个空白的，要么用float布局的方式！

心碎无痕… 2022-09-18 15:52:11

楼上的那位回答也可以我之前的做法是给li里面加一个div

    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            flex: 0 0 25%;
            padding-right: 10px;
            box-sizing: border-box;  
            div{
                border:1px solid red;
                height: 40px;
            }

            &:nth-child(4n){
                padding-right: 0;
            }
        }

    }

小帐篷 2022-09-18 15:52:11

在 ul 中设置 justify-content: space-between;即可不知道我理解得对不对

趴在窗边数星星i 2022-09-18 15:52:11

同遇到这样需求，用flex 布局好像实现不了
用grid 布局解决了，但ie 下 grid 兼容性感人
参考一下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>demo</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body,
      html {
        width: 100%;
        height: 100%;
      }
      .content {
        width: 1000px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(auto-fill, 30%);
        grid-gap: 20px;
        justify-content: space-between;
        /* grid-auto-flow: row dense; */
      }

      .item {
        font-size: 4em;
        text-align: center;
        border: 1px solid #e5e4e9;
      }

      .item-1 {
        background-color: #ef342a;
        grid-column-start: 1;
        grid-column-end: 3;
      }

      .item-2 {
        background-color: #f68f26;
        /* grid-column-start: 1; */
        /* grid-column-end: 3; */
      }

      .item-3 {
        background-color: #4ba946;
      }

      .item-4 {
        background-color: #0376c2;
      }

      .item-5 {
        background-color: #c077af;
      }

      .item-6 {
        background-color: #f8d29d;
      }

      .item-7 {
        background-color: #b5a87f;
      }

      .item-8 {
        background-color: #d0e4a9;
      }

      .item-9 {
        background-color: #4dc7ec;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="item item-1">
        <p>1</p>
      </div>
      <div class="item item-2"><p>2</p></div>
      <div class="item item-3"><p>3</p></div>
      <div class="item item-4"><p>4</p></div>
      <div class="item item-5"><p>5</p></div>
      <div class="item item-6"><p>6</p></div>
      <div class="item item-7"><p>7</p></div>
      <div class="item item-8"><p>8</p></div>
      <div class="item item-9"><p>9</p></div>
    </div>
  </body>
</html>

~没有更多了~

关于作者

请你别敷衍

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

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

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

友情链接

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

原文