如何每行显示三列? [英] How can I show three columns per row?

问题描述

我一直在尝试每行显示三列.可以使用 flexbox 吗?

我目前的 CSS 是这样的:

.mainDiv {显示:弹性；左边距:221px；边距顶部:43px；}

此代码将所有内容放在一行中.我想添加一个约束，每行只显示三个记录.

解决方案

这可能就是您要找的:

http://jsfiddle.net/L4L67/

body>div {背景:#aaa;显示:弹性；flex-wrap: 包裹;}正文>div>div{弹性增长:1；宽度:33%；高度:100px；}body>div>div:nth-child(even) {背景:#23a；}body>div>div:nth-child(odd) {背景:#49b；}

<div></div><div></div><div></div><div></div><div></div><div></div>

I have been trying to show three columns per row. Is it possible using flexbox?

My current CSS is something like this:

.mainDiv {
    display: flex;
    margin-left: 221px;
    margin-top: 43px;
}

This code puts all content in a single row. I want to add a constraint to just shows three records per row.

解决方案

This may be what you are looking for:

http://jsfiddle.net/L4L67/

body>div {
  background: #aaa;
  display: flex;
  flex-wrap: wrap;
}

body>div>div {
  flex-grow: 1;
  width: 33%;
  height: 100px;
}

body>div>div:nth-child(even) {
  background: #23a;
}

body>div>div:nth-child(odd) {
  background: #49b;
}

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

这篇关于如何每行显示三列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！