想请问大家一个关于flex布局方面的问题?

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
    *{
      padding: 0;
      margin: 0;
    }
    .a{
      display: flex;
      width: 100%;
      justify-content: space-between;
    }
    .b{
      width: 22%;
      display: flex;
      align-items: center;
      background-color: #ccc;
    }
  </style>
  <title>1</title>                                                                        
</head>

<body>

  <div class="a">
    <div class="b">111</div>
    <div class="b">222</div>
    <div class="b">333</div>
    <div class="b">444</div>
  </div>

  <div style="height:10px;"></div>

  <div class="a">
    <div class="b">111</div>
    <div class="b">222</div>
  </div>

  <script>

  </script>
</body>

</html>

我想让下面的111 和 222 对齐上面的,就是把最右边的222 移到第二个位置,请问如何做,不能去改第一行的justify-content: space-between;

谢谢大家

回复
阅读 2.8k
11 个回答

非要这样的话,数据源补齐4倍数,然后让补齐的元素存在但设置透明就行

其实吧,你都按照百分比去做宽度了。那么最简单的就是给最后一个元素添加 margin-right:auto就好了。
image.png
如果说你要做间距,就给他添加一个 margin-left 这个间距的值就是一个固定的百分比值。比如说 4%
image.png


但是最好呢,是使用 gap 来处理。比如说这样:
image.png

然后再稍微优化一下:
image.png

相关阅读
gap - CSS | MDN
在 Flex 布局中使用 gap 属性 | blog [ YOG WANG ]

一个暴力的解法:每个 .a 都放四个 .b 就可以了,只不过最后一行的不让用户看见

新手上路,请多包涵

小步快走方式

.a .b:last-child:first-child {
        order: 1;
}   


.a .b:last-child:last-child {
    order: 2;
}


.a:last-child::after,
.a:last-child::before {
    visibility: hidden;
    content: '';
    width: 22%;
}


.a:last-child::after {
    order: 3;
}


.a:last-child::before {
    order: 4;
}
新手上路,请多包涵

我遇到过更麻烦的,子元素长度是固定的,在不同设备或者缩放场景,每行个数还不一样,最后通过监听窗口宽度,实时计算,在最后一行添加若干个(前面计算出的)不可见div给顶到前面去,样式设置略有不同:

    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
  1. 这种样式建议修改html结构,否则flex-item数量不定添加隐藏元素解决
  2. 建议在这种样式布局中使用 grid 代替 flex

grid简单实现:https://codesandbox.io/s/cool...

此外通过 grid 还可以实现响应式,根据容器宽度调整每行容器的数量。

grid 很强大,有时发现用 flex 很难实现不妨试试 grid

新手上路,请多包涵

感觉你用了space-between又不想要sapce-between的布局,感觉就很矛盾,不如直接用display:grid

<html>
    <head>
        <style>
            html,
            body,
            #container {
                width: 100%;
                height: 100%;
            }

            * {
                padding: 0;
                margin: 0;
            }

            .container {
                display: grid;
                grid-template-columns: 100px 100px 100px 100px;
                grid-template-rows: 50px 50px;
            }

            .container div {
                text-align: center;
                line-height: 30px;
                border: 2px solid;
                margin: 10px;
            }
        </style>
        <title>1</title>
    </head>

    <body>
        <div class="container">
            <div>1</div>

            <div>2</div>

            <div>3</div>

            <div>4</div>

            <div>5</div>

            <div>6</div>
        </div>

        <script></script>
    </body>
</html>

效果图

在 flex 布局中用 margin 往往可以达到奇怪的对齐效果,flex 下子元素的间距都是自动计算的。

.a .b:last-of-type {
  margin-left: auto;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏