推荐关注 Meteor JSLint - a Javascript code quality tool jsFiddle D3.js WebStorm 推荐书目 Javascript 权威指南第 5 版
Closure: The Definitive Guide
Closure: The Definitive Guide 
这是一个创建于 2111 天前的主题，其中的信息可能已经有所发展或是发生改变。
像这样子 375px 的布局，黑色是菜单 100px，然后天蓝色是两边的等距 20px，剩下中间就是 235px 了，有一些 70px 的分类，一行放三个，中间黑色箭头的距离 25px 该怎么等分呢，一三俩个贴边，二居中？会有动态加载即肯定不止一行的情况，求大佬指点！
第 1 条附言 2020-01-03 16:40:50 +08:00
谢谢大佬们解答。对于动态加载的 flex 布局，如果第二行只有两条的话，就会两端对齐了，然后就需要手动去 js 里面操作把这个 list 加一项，让第二行补充为三个才会样式正常。但是现在我想问的是有没有只从单纯的 css 来实现，不要出现 .5px 的情况，移动端。。。
第 2 条附言 2020-01-03 16:57:43 +08:00
感谢大家的解答，10L 和 12L 是我所需要的，再次感谢！
第 3 条附言 2020-01-04 11:52:49 +08:00
看到 grid 布局的这么多，平时我用的少所以想问一下，这里想要的是在 20padding 的基础上两端对齐，然后一三需要贴合 padding，二居中，那不是还需要选择器来判断一三 text-align:left or right，二：text-align: center 吗？这样的话和 10L 大佬的方法在最后一个去算 margin-right 我觉得好像都差不多，而且对于 grid 在移动端的坑其实我也不太懂，平时主要还是 flex 用得多。
 | 1 daquandiao2 2020-01-03 16:08:57 +08:00 display flex justify-content space-between |
 | 2 toacnme 2020-01-03 16:12:06 +08:00 问后端的话就是 flex 一把梭 |
 | 3 liyang5945 2020-01-03 16:12:59 +08:00 flex 布局完事，父容器设置 justify-content 为 space-between 或 space-around |
 | 4 yafoo 2020-01-03 16:15:44 +08:00 flex 吧，最好的布局方式 |
 | /td> | 5 zzlit OP 怎么不能 append ？忘记说了，最好能只用 css 来解决，用 flex 的 space-between 话，第二行如果只有两个的话就需要手动操作这个 list 再添加一项才能保持样式正常的。 @daquandiao2 @liyang5945 @toacnme @yafoo |
 | 6 p8YFk4f3E8SJ3aEv 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; } |
| 7 p8YFk4f3E8SJ3aEv 2020-01-03 16:23:41 +08:00 .box { width: 70px; } |
 | 8 maruize321 2020-01-03 16:32:40 +08:00 flex 随便搞 |
 | 9 myEzekiel 2020-01-03 16:36:05 +08:00 基本都 flex |
 | 10 SakuraKuma 2020-01-03 16:40:40 +08:00  1 最后一行问题，搭配 nth-child:last-child 就好了 例如你现在的是 70px: .item:nth-child(3n-1):last-child { margin-right: calc(100% - 140px - (100% - 210px) / 2) } |
| 11 maruize321 2020-01-03 16:42:08 +08:00 为什么剩下 235px 不是 335 ？ |
 | 12 vivipure 2020-01-03 16:42:29 +08:00 3 多行不确定项时，不要使用 justify-content: space-between; 直接默认 flex-start,宽度取百分比，对中间元素取 margin.用 div { width: 30%; } div:nth-child(3n+2) { margin: 0 5%; } |
| 13 maruize321 2020-01-03 16:43:16 +08:00 打扰了 |
 | 14 yeept 2020-01-03 16:44:35 +08:00 最后一行问题可以使用 ::after 伪元素选择器可以解决吧 |
 | 15 rabbbit 2020-01-03 16:47:08 +08:00  |
 | 16 LyleRockkk 2020-01-03 16:47:35 +08:00 10L 和 12L 方法都可行，12L 可能写起来更简单一点，无需计算。 但是 使用 flex 的时候，注意要设置 box-sizing: border-box; |
 | 17 shintendo 2020-01-03 16:51:13 +08:00 margin-left: 12.5px |
 | 18 KuroNekoFan 2020-01-03 16:51:29 +08:00 10L 的挺好 |
 | 19 ccyu220 2020-01-03 16:59:40 +08:00 最简单的办法 div{ width: 32%; } div:not(:first-child){ margin-left: 2%; } |
 | 20 hoshizukiko 2020-01-03 17:02:14 +08:00 我一般是用六楼的方法。 10l 12l 的学到了 |
 | 21 Austaras 2020-01-03 17:02:29 +08:00 2200 年了，不如直接 grid，只要设 column-gap 就好了 |
 | 24 howell5 2020-01-03 17:14:21 +08:00 <body> <div class="main"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> </div> </body> .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 |
 | 25 redam 2020-01-03 17:17:08 +08:00 这样？ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cOntent="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" cOntent="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } html,body { height: 100%; } .side-bar { float: left; width: 100px; height: 100%; background: #000; } .list { box-sizing: border-box; margin-left: 100px; padding-left: 20px; padding-right: 20px; overflow: hidden; } .item-wrap { float: left; width: calc(100% / 3); text-align: center; } .item { display: inline-block; width: 70px; height: 70px; background: red; } </style> </head> <body> <div class="side-bar"></div> <div class="list"> <div class="item-wrap"> <div class="item"></div> </div> <div class="item-wrap"> <div class="item"></div> </div> <div class="item-wrap"> <div class="item"></div> </div> <div class="item-wrap"> <div class="item"></div> </div> </div> </body> </html> |
| 26 howell5 2020-01-03 17:19:13 +08:00 @howell5 思路：首先容器增加 flex-wrap wrap，然后 item 中为 3 的倍数的 margin-right 置 0, 需要注意的是如果 item 有 padding/border 等属性，还需要增加 box-sizing: border-box 阻止 item 膨胀 |
| 28 zzlit OP @redam 感谢解答，已找到答案，不过这个 demo 里面 item 外面的 item-wrap 没有贴合两边的导致留白了 |
| 30 redam 2020-01-03 17:25:39 +08:00 1 @zzlit 呃呃，没看清题目，加个这个好了 .item-wrap:nth-child(3n-2) { text-align: left; } .item-wrap:nth-child(3n) { text-align: right; } |
 | 31 MMDeJeVS3GtMVLeu 2020-01-03 17:29:30 +08:00 2 这篇博客不错 [让 CSS flex 布局最后一行列表左对齐的 N 种方法]( https://www.zhangxinxu.com/study/201908/flex-last-align-demo.php) |
 | 33 hyy1995 2020-01-03 18:30:49 +08:00 用 nth 选择器就行，你去百度下这玩意的用法，这种布局分分钟随便写。。。。 |
 | 34 huguotai 2020-01-03 18:33:14 +08:00 直接用 flex 布局啊~~~ |
 | 37 wangyzj 2020-01-03 19:51:20 +08:00 @daquandiao2 正解啊 |
 | 38 otakustay 2020-01-03 20:03:18 +08:00 flex 应该搞不定这事，最后一行只有 1 个或 2 个的话会布局有问题，直接用 grid 会好一些 |
 | 39 jason94 2020-01-03 23:22:18 +08:00 flex 解决不了，楼上说的 margin 有时候还是会存在有 bug。 最终的解决办法是 grid |
 | 40 userdhf 2020-01-03 23:44:54 +08:00 用 grid 啊。。。 |
 | 41 darknoll 2020-01-04 00:25:38 +08:00 via Android 咋不用 12 栅格布局 |
 | 42 Allianzcortex 2020-01-04 10:40:43 +08:00 via iPhone 需求是多行两端对齐尾行左对齐，grid 的 repeat +++1 |
 | 43 imdoge 2020-01-04 15:02:14 +08:00 如果不用 flex 的话，传统方法 grid 布局的思想 容器左右两端给一个负的 margin，然后每一个块的宽度是 100%/个数，每一个有一个 padding，左右正好是容器的负 margin，这样就正好左右两个贴边，中间的均匀分布了 |
 | 44 MiracleKagari 2020-01-04 22:59:28 +08:00 via Android item inline-block，nth-child( 3n-1),设置每行中间那个 item margin:0 12.5px;即可 |
Select Language