问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
李冰
    17765375
      <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整除就会有问题....纠结啊!!!

    html5css3cssflex
    阅读 42.9k
    6 个回答
    得票最新
    头像
    以乐之名
      3.9k11
      ✓ 已被采纳
      1. ul层flex左对齐
      2. li层通过margin实现间距
      3. 第4n个右边距为0
      4. 剩下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%;
        }
     }
}
      头像
      牛书书
        10.1k72035

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

        头像
        王大冶
          68.1k53089

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

          头像
          孤独的根号3
            1.8k316

            楼上的那位回答也可以 我之前的做法是给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;
            }
        }

    }
            头像
            沃特哈哈
              1
              新手上路，请多包涵

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

              头像
              兜兜柱
                302

                同遇到这样需求，用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>

                image

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题