我想用react以3*X的网格方式显示图像

Question

我有一个数组列表，其中包括图像url。我想绑定每个项目到一个div使用react-bootstrap(库不是约束，但它应该与react兼容)。我想要对齐div，在每行中我将有3个图像，如果有第4个项目在集合中，那么它滑动到下一行。

下面是集合

const images = [
{
src:
'https://images.unsplash.com/photo-1509420316987-d27b02f81864?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
width: 1500,
height: 1000,
},
{
src:
'https://images.unsplash.com/photo-1509641498745-13c26fd1ed89?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
width: 666,
height: 1000,
},
{
src:
'https://images.unsplash.com/photo-1491146179969-d674118945ff?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
width: 1500,
height: 844,
},
{
src:
'https://images.unsplash.com/photo-1509420316987-d27b02f81864?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
width: 1500,
height: 1000,
},
{
src:
'https://images.unsplash.com/photo-1509641498745-13c26fd1ed89?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
width: 666,
height: 1000,
}
]

Answer 1

我将用display: flex创建一个换行div。

<div id="img-wrapper">
<div><img src="your image" /></div>
<div><img src="your image" /></div>
</div>

CSS:

#img-wrapper {
display: flex;
flex-wrap: wrap;
}
#img-wrapper > div {
flex: 0 1 33%;
}

flex:告诉子div它应该增长，收缩，以及它应该有多大的大小:

flex:"flex-grow"flex-shrink"flex-basis"

编辑:正如Baruch Mashasha所说，网格在这方面会更好。

Answer 2

将所有图像放入容器中并使用网格

.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 10px;
}
img {
width: 200px;
height: 200px;
}