我正在使用弹性框显示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>我正在使用 flexbox 和新gap函数在项目之间添加一些空间。我试图每行有 4 个项目，因此将项目宽度设置为25%这样......
.container {
display: flex;
max-width: 800px;
width: 100%;
background: gold;
flex-wrap: wrap;
gap: 20px;
}
.item {
width: 25%;
background: teal;
}<div class="container">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
<div class="item">
Item 6
</div>
</div>但这给了我每行 3 个项目，我认为这是因为它gap在计算宽度时考虑了该值。
我该如何解决这个问题？
所以我的目标是有 3 个子元素，每个元素的宽度为 50%，并使用 flex-wrap:wrap 以便第三个元素低于第一个元素，但是，我还希望第一个和第二个子元素之间有 10px 的间隙，当我向第一个子元素添加 margin-right: 5px ，向第二个子元素添加 margin-left: 5px ，第二个子元素包裹在第一个子元素下方，因为额外的边距没有为同一行上的第二个子元素留下足够的空间。
我如何计算出 10px 占宽度的百分比是多少？
.projects {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.project {
width: 50%
}
.project:nth-child(odd) {
margin-right: 5px;
background-color: red;
}
.project:nth-child(even) {
margin-left: 5px;
background-color: blue;
}<div class='projects'>
<div class='project'>s</div>
<div class='project'>s</div>
<div class='project'>s</div>
</div>所以看来我误解了有关 Flexbox 的一些内容，并且无法正确解决问题。
我有一个 Flexbox 容器，其中包含四列，它们是 Flexbox 容器的直接子级。一旦浏览器窗口宽度达到 992px 及更低，我想进行更改，以便 .flexbox-item 占据容器宽度的 50%。
问题：
如果我不在 .flexbox-container 上使用“gap”属性，它似乎工作正常，但是一旦我设置了gap：1em，那么百分比就无法正常工作，据我所知，间隙被考虑在内并增加了宽度到那些 .flex-item 项目。
问题：
我如何正确确保一旦浏览器窗口为 992px 或更低，每个 Flexbox 项目都占 50%，这样我可以在每行中有两列，因为显然我可以使用“width”属性并给它假设 45 % 它会起作用，但对我来说它看起来不是一个正确的解决方案。我想知道当使用“间隙”属性时仍然正确使用这些百分比的最简单方法是什么。
这是我的代码：
.flexbox-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 1em;
}
.flexbox-item {
width: 25%;
background-color: lightgreen;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 992px) {
.flexbox-item {
width: 50%;
}
}<div class="flexbox-container">
<div class="flexbox-item">Item 1</div>
<div class="flexbox-item">Item 2</div>
<div class="flexbox-item">Item 3</div>
<div …我想每排生 3 个孩子。当使用 inline-flex 和 grid （或边距/填充）时，flexbox 每行换行 2 个子项。似乎网格宽度已被考虑到每个子项的宽度中。在不改变 HTML 的情况下，有什么办法可以解决这个问题吗？我想保持10px每个孩子之间的间距相同，让父母在身体内水平居中，并将每个孩子的宽度保持为33.3333%.
我不只是将其更改为或类似的原因flex-basis: calc(33.3333% - 10px);是因为这不是一个精确的解决方案。父 div 边缘上的图像并不总是来自10px窗口的边缘。
提前致谢！
这是我的代码：
body {
background-color: lightgreen;
margin: 10px;
}
.parent {
width: 100%;
background-color: coral;
justify-content: center;
align-items: center;
display: inline-flex;
flex-wrap: wrap;
gap: 10px;
}
.child {
flex-basis: 33.3333%;
}<div class="parent">
<div class="child">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
</div>
<div class="child">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
</div>
<div …