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>

当前回答

.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>

;)

2018-03-31 19:33:12

其他回答

为.child元素添加宽度。如果你想每行都是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);
}

2015-04-09 18:52:45

欲了解更多细节，请点击此链接

.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>

2017-08-16 10:40:38

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

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

2016-07-31 20:30:38

这是另一种方法。

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

.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

2017-07-13 22:36:47

弹性包装+负边际

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

Flex在元素大小方面提供了更大的灵活性内置白间距折叠(见3个内联块div，正好33%的宽度不适合父)

为什么是负边际?

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

实现

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;
}

2019-08-25 15:13:09

Flexbox:每行4个道具

推荐文章

最新文章

标签