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: 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/

2021-12-27 09:33:23

其他回答

你可以试试这个

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

2021-12-27 09:33:23

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

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

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

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

2017-10-10 01:42:04

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

.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水沟:

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

2019-01-13 02:58:19

Flexbox:每行4个道具

推荐文章

最新文章

标签