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

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

回复
阅读 34.8k
6 个回答
以乐之名
  • 3.9k
✓ 已被采纳
  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%;
        }
     }
}

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

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

李昊天
  • 1.8k

楼上的那位回答也可以 我之前的做法是给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;即可 不知道我理解得对不对

兜兜柱
  • 30

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

宣传栏