像这样子 375px 的布局，黑色是菜单 100px，然后天蓝色是两边的等距 20px，剩下中间就是 235px 了，有一些 70px 的分类，一行放三个，中间黑色箭头的距离 25px 该怎么等分呢，一三俩个贴边，二居中？会有动态加载即肯定不止一行的情况，求大佬指点！

display flex
justify-content space-between

问后端的话就是 flex 一把梭

flex 布局完事，父容器设置 justify-content 为 space-between 或 space-around

flex 吧，最好的布局方式

怎么不能 append ？忘记说了，最好能只用 css 来解决，用 flex 的 space-between 话，第二行如果只有两个的话就需要手动操作这个 list 再添加一项才能保持样式正常的。
@yafoo


.main {
display: flex;
}
.main-left {
width: 100px;
}
.main-right {
flex: 1;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}

.box {
width: 70px;
}

flex 随便搞

基本都 flex

最后一行问题，搭配 nth-child:last-child 就好了
例如你现在的是 70px:
.item:nth-child(3n-1):last-child {
margin-right: calc(100% - 140px - (100% - 210px) / 2)
}

为什么剩下 235px 不是 335 ？

多行不确定项时，不要使用 justify-content: space-between; 直接默认 flex-start,宽度取百分比，对中间元素取 margin.用
div {
width: 30%;
}
div:nth-child(3n+2) {
margin: 0 5%;
}

打扰了

最后一行问题可以使用 ::after 伪元素选择器可以解决吧



10L 和 12L 方法都可行，12L 可能写起来更简单一点，无需计算。 但是 使用 flex 的时候，注意要设置 box-sizing: border-box;

margin-left: 12.5px

10L 的挺好

最简单的办法
div{
width: 32%;
}
div:not(:first-child){
margin-left: 2%;
}

我一般是用六楼的方法。
10l 12l 的学到了

2200 年了，不如直接 grid，只要设 column-gap 就好了

知道为什么 grid 不在正式项目用的原因吗。。。

我这边需要贴两边然后中间的居中，我尝试过 grid，没有实现想要的效果





.main
display flex
width 235px
height 500px
flex-wrap wrap
border 1px solid black
.box
width 70px
height 70px
margin-right 12.5px
&:nth-of-type(3n)
margin-right 0

这样？





content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">










思路：首先容器增加 flex-wrap wrap，然后 item 中为 3 的倍数的 margin-right 置 0, 需要注意的是如果 item 有 padding/border 等属性，还需要增加 box-sizing: border-box 阻止 item 膨胀

emmm,还得加上
.item {vertical-align:middle}

感谢解答，已找到答案，不过这个 demo 里面 item 外面的 item-wrap 没有贴合两边的导致留白了

移动端 0.5px 不行的

呃呃，没看清题目，加个这个好了
.item-wrap:nth-child(3n-2) {
text-align: left;
}
.item-wrap:nth-child(3n) {
text-align: right;
}

这篇博客不错
[让 CSS flex 布局最后一行列表左对齐的 N 种方法]( https://www.zhangxinxu.com/study/201908/flex-last-align-demo.php)

也行！
非常感谢！

用 nth 选择器就行，你去百度下这玩意的用法，这种布局分分钟随便写。。。。

直接用 flex 布局啊~~~

移动端一般都没有兼容性问题

你这不是写了都是 70px 吗，都可以算出来的啊

正解啊

flex 应该搞不定这事，最后一行只有 1 个或 2 个的话会布局有问题，直接用 grid 会好一些

flex 解决不了，楼上说的 margin 有时候还是会存在有 bug。
最终的解决办法是 grid

用 grid 啊。。。

咋不用 12 栅格布局

需求是多行两端对齐尾行左对齐，grid 的 repeat +++1

如果不用 flex 的话，传统方法 grid 布局的思想
容器左右两端给一个负的 margin，然后每一个块的宽度是 100%/个数，每一个有一个 padding，左右正好是容器的负 margin，这样就正好左右两个贴边，中间的均匀分布了

item inline-block，nth-child( 3n-1),设置每行中间那个 item margin:0 12.5px;即可

这篇文章太棒了！ css 鬼才