如何强制一个弹性框每行显示4个项目？
我正在使用弹性框来显示8个项目，这些项目将dynamic调整我的页面大小。 我如何强制它分成两行的项目？ （每行4个）？
这里是一个相关的剪辑：
（或者如果你喜欢jsfiddle – http://jsfiddle.net/vivmaha/oq6prk1p/2/ ）
.parent-wrapper { height: 100%; width: 100%; border: 1px solid black; } .parent { display: flex; font-size: 0; flex-wrap: wrap; margin: -10px 0 0 -10px; } .child { display: inline-block; background: blue; margin: 10px 0 0 10px; flex-grow: 1; height: 100px; } <body> <div class="parent-wrapper"> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </div> </body>
为.child元素添加一个宽度。 我个人会使用margin-left百分比，如果你想每一行都有4个。
DEMO
.child { display: inline-block; background:blue; margin:10px 0 0 2%; flex-grow: 1; height:100px; width: calc(100% * (1/4) - 10px - 1px); }
这是另一个应用程序。
你也可以这样做：
.parent{ display: flex; flex-wrap: wrap; } .child{ width: 25%; box-sizing: border-box; }
示例： https ： //codepen.io/capynet/pen/WOPBBm
还有一个更完整的示例： https : //codepen.io/capynet/pen/JyYaba
你有flex-wrap: wrap在容器上。 这很好，因为它覆盖了默认值，这是nowrap （ 源 ）。 这是项目在某些情况下不包装形成网格的原因。
在这种情况下，Flex项目上的主要问题是flex-grow: 1 。
flex-grow属性实际上并不会弹性项目的大小。 它的任务是分配容器中的空闲空间（ 来源 ）。 所以不pipe屏幕尺寸有多小，每个项目都会收到一条线上空闲空间的比例部分。
更具体地说，您的容器中有八个弹性项目。 在flex-grow: 1 ，每个接收线上1/8的空闲空间。 由于您的项目中没有内容，因此可以缩小到零宽度，并且永远不会换行。
解决的办法是在物品上定义一个宽度。 尝试这个：
.parent { display: flex; flex-wrap: wrap; } .child { flex: 1 0 20%; /* explanation below */ margin: 5px; height: 100px; background-color: blue; }
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
<style type="text/css"> .parent{ display: flex; flex-wrap: wrap; } .parent .child{ flex: 1 1 25%; } </style> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
希望能帮助到你。 有关更多详细信息，请点击此链接
我相信这个例子更准确， 更容易理解 @dowomenfart。
.child { display: inline-block; margin: 0 1em; flex-grow: 1; width: calc(25% - 2em); }
当直接切割肉时，这实现了相同的宽度计算。 math方式更容易，由于其可扩展性和移动友好性，它们是新的标准 。
这是另一种不使用calc() 。
// 4 PER ROW // 100 divided by 4 is 25. Let's use 21% for width, and the remainder 4% for left & right margins... .child { margin: 0 2% 0 2%; width: 21%; } // 3 PER ROW // 100 divided by 3 is 33.3333... Let's use 30% for width, and remaining 3.3333% for sides (hint: 3.3333 / 2 = 1.66666) .child { margin: 0 1.66666% 0 1.66666%; width: 30%; } // and so on!
这里的所有都是它的。 你可以看到尺寸更美观的尺寸，但这是这个想法。
