javascript - 如何在反应中显示3行数据？

Question

我有 12 个博客如何在反应中显示 3 行宽 4 列的博客片段？我在下面尝试过，但内容只是集中在列中

下面是jsx

 {Data.map((item) => {
                    return (
                        <div key={item.id} className='div-style'>
                            <div>
                                <img src={item.image} alt="img" width='300' height="200"></img>
                            </div>
                            <div>
                                <h2>{item.header}</h2>
                            </div>
                            <div>
                                <p>{item.pargraph}</p>
                            </div>
                        </div>
                    )
                })
                }

下面是css

.div-style{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

标签： javascriptcssreactjs

Answer 1

您将需要为博客添加一个容器 div（只需在运行数组map()方法之前添加一个 div），然后您可以更新您的 css，例如：

.div-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.div-container>.div-style {
  flex: 1 1 20%;
  margin: 5px;
  height: 50px;
}

.div-style {
  background-color: #aaa;
  border: 1px solid #777;
}

<div class="div-container">
  <div class="div-style">1</div>
  <div class="div-style">2</div>
  <div class="div-style">3</div>
  <div class="div-style">4</div>
  <div class="div-style">5</div>
  <div class="div-style">6</div>
  <div class="div-style">7</div>
  <div class="div-style">8</div>
  <div class="div-style">9</div>
  <div class="div-style">10</div>
  <div class="div-style">11</div>
  <div class="div-style">12</div>
</div>