请教一个移动端 css 的样式问题

2020-01-03 16:05:26 +08:00
 zzlit

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

4765 次点击
所在节点    JavaScript
45 条回复
daquandiao2
2020-01-03 16:08:57 +08:00
display flex
justify-content space-between
toacnme
2020-01-03 16:12:06 +08:00
问后端的话就是 flex 一把梭
liyang5945
2020-01-03 16:12:59 +08:00
flex 布局完事，父容器设置 justify-content 为 space-between 或 space-around
yafoo
2020-01-03 16:15:44 +08:00
flex 吧，最好的布局方式
zzlit
2020-01-03 16:18:44 +08:00
怎么不能 append ？忘记说了，最好能只用 css 来解决，用 flex 的 space-between 话，第二行如果只有两个的话就需要手动操作这个 list 再添加一项才能保持样式正常的。
@daquandiao2 @liyang5945 @toacnme @yafoo
f056917
2020-01-03 16:22:38 +08:00
<div class="main">
<div class="main-left"></div>
<div class="main-right">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>

.main {
display: flex;
}
.main-left {
width: 100px;
}
.main-right {
flex: 1;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
f056917
2020-01-03 16:23:41 +08:00
.box {
width: 70px;
}
maruize321
2020-01-03 16:32:40 +08:00
flex 随便搞
myEzekiel
2020-01-03 16:36:05 +08:00
基本都 flex
SakuraKuma
2020-01-03 16:40:40 +08:00
最后一行问题，搭配 nth-child:last-child 就好了
例如你现在的是 70px:
.item:nth-child(3n-1):last-child {
margin-right: calc(100% - 140px - (100% - 210px) / 2)
}
maruize321
2020-01-03 16:42:08 +08:00
为什么剩下 235px 不是 335 ？
vivipure
2020-01-03 16:42:29 +08:00
多行不确定项时，不要使用 justify-content: space-between; 直接默认 flex-start,宽度取百分比，对中间元素取 margin.用
div {
width: 30%;
}
div:nth-child(3n+2) {
margin: 0 5%;
}
maruize321
2020-01-03 16:43:16 +08:00
打扰了
yeept
2020-01-03 16:44:35 +08:00
最后一行问题可以使用 ::after 伪元素选择器可以解决吧
rabbbit
2020-01-03 16:47:08 +08:00
LyleRockkk
2020-01-03 16:47:35 +08:00
10L 和 12L 方法都可行，12L 可能写起来更简单一点，无需计算。 但是 使用 flex 的时候，注意要设置 box-sizing: border-box;
shintendo
2020-01-03 16:51:13 +08:00
margin-left: 12.5px
KuroNekoFan
2020-01-03 16:51:29 +08:00
10L 的挺好
ccyu220
2020-01-03 16:59:40 +08:00
最简单的办法

div{
width: 32%;
}

div:not(:first-child){
margin-left: 2%;
}
hoshizukiko
2020-01-03 17:02:14 +08:00
我一般是用六楼的方法。
10l 12l 的学到了

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/634807

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX