Flexbox:每行4个道具

我使用一个伸缩框来显示8个项目，这些项目将随着我的页面动态调整大小。我如何迫使它把项目分成两行?(每行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>

728931 次浏览
小开

为.child元素添加宽度。如果你想每行总是4，我个人会在margin-left上使用百分比。

DEMO

.child {
display: inline-block;
background: blue;
margin: 10px 0 0 2%;
flex-grow: 1;
height: 100px;
width: calc(100% * (1/4) - 10px - 1px);
}
小开

这里有另一种不使用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!

这就是它的全部。你可以在尺寸上花点心思来获得更美观的尺寸，但这就是我们的想法。

小开

这是另一种方法。

你也可以用这种方式来实现:

.parent{
display: flex;
flex-wrap: wrap;
}


.child{
width: 25%;
box-sizing: border-box;
}
< p >样本: https://codepen.io/capynet/pen/WOPBBm < / p >

和更完整的样本: https://codepen.io/capynet/pen/JyYaba < / p >

小开
最佳答案

容器上有flex-wrap: wrap。这很好，因为它覆盖了默认值nowrap (源)。这就是在某些情况下中项目不换行形成网格的原因。

在这种情况下，主要问题是伸缩项上的flex-grow: 1。

flex-grow属性实际上并不调整伸缩项的大小。它的任务是分配容器(源)中的空闲空间。所以不管屏幕大小有多小，每个项目都将获得相应比例的在线空闲空间。

更具体地说，容器中有8个伸缩项。使用flex-grow: 1，每个对象接收一行上1/8的空闲空间。因为你的项目中没有内容，它们可以收缩到零宽度，永远不会自动换行。

解决方案是在项目上定义宽度。试试这个:

.parent {
display: flex;
flex-wrap: wrap;
}


.child {
flex: 1 0 21%; /* 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>

在flex简写中定义了flex-grow: 1，因此不需要将flex-basis设为25%，这实际上会导致每行有3个项。

由于flex-grow将消耗行上的空闲空间，所以flex-basis只需要足够大以强制换行。在这种情况下，使用flex-basis: 21%，页边距有足够的空间，但没有足够的空间来放置第五项。

小开

要了解更多细节，您可以使用链接

.parent{
display: flex;
flex-wrap: wrap;
}


.parent .child{
flex: 1 1 25%;
/*Start Run Code Snippet output CSS*/
padding: 5px;
box-sizing: border-box;
text-align: center;
border: 1px solid #000;
/*End Run Code Snippet output CSS*/
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>

小开

我相信这个例子更简单，更容易理解然后@dowomenfart。

.child {
display: inline-block;
margin: 0 1em;
flex-grow: 1;
width: calc(25% - 2em);
}

在直接切到肉的同时，这实现了相同的宽度计算。数学计算更简单，由于其可扩展性和移动友好性，em是新标准。

小开 

.parent-wrapper {
height: 100%;
width: 100%;
border: 1px solid black;
}
.parent {
display: flex;
font-size: 0;
flex-wrap: wrap;
margin-right: -10px;
margin-bottom: -10px;
}
.child {
background: blue;
height: 100px;
flex-grow: 1;
flex-shrink: 0;
flex-basis: calc(25% - 10px);
}
.child:nth-child(even) {
margin: 0 10px 10px 10px;
background-color: lime;
}
.child:nth-child(odd) {
background-color: orange;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">


</style>
</head>
<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>
</html>

；）

小开

我会这样做，使用负边缘和calc水沟:

.parent {
display: flex;
flex-wrap: wrap;
margin-top: -10px;
margin-left: -10px;
}


.child {
width: calc(25% - 10px);
margin-left: 10px;
margin-top: 10px;
}

演示: https://jsfiddle.net/9j2rvom4/

替代CSS网格方法:

.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}

演示: https://jsfiddle.net/jc2utfs3/

小开

弹性包装+负边际

为什么flex vs. display: inline-block?

为什么是负边际?

对于边缘情况(即列中的第一个元素)，您可以使用SCSS或CSS-in-JS，或者设置一个默认的边距，然后去掉外部边距。

实现

< a href = " https://codepen。io/zurfyx/pen/BaBWpja" rel="nofollow noreferrer">https://codepen.io/zurfyx/pen/BaBWpja

<div class="outerContainer">
<div class="container">
<div class="elementContainer">
<div class="element">
</div>
</div>
...
</div>
</div>

:root {
--columns: 2;
--betweenColumns: 20px; /* This value is doubled when no margin collapsing */
}


.outerContainer {
overflow: hidden; /* Hide the negative margin */
}


.container {
background-color: grey;
display: flex;
flex-wrap: wrap;
margin: calc(-1 * var(--betweenColumns));
}


.elementContainer {
display: flex; /* To prevent margin collapsing */
width: calc(1/var(--columns) * 100% - 2 * var(--betweenColumns));
margin: var(--betweenColumns);
}


.element {
display: flex;
border: 1px solid red;
background-color: yellow;
width: 100%;
height: 42px;
}
小开

你可以试试这个

.parent-wrapper {
height:100%;
width:100%;
border: 1px solid black;
}
.parent {
display: grid;
font-size: 0;
grid-template-columns: 25% 25% 25% 25%;
}
.child {
background:blue;
flex-grow: 1;
height:100px;
margin: 10px;
margin-bottom: 0;
}


.child:last-child {
margin-bottom: 10px;
}
<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>

https://jsfiddle.net/samet19/gdntwLhb/


提交答案