将 flex 属性应用于 React 映射项答案

【问题标题】：Apply flex property to React mapped items将 flex 属性应用于 React 映射项
【发布时间】：2021-02-04 02:06:56
【问题描述】：

我有一个要映射的项目数组，并希望将它们设置为 flex wrap 项目，以便它们最终排成一行。但是，我尝试了多种方法来解决这个问题，但这些项目仍然列在一个列中。

这是我想要的结果：https://www.nike.com/w/mens-training-gym-shoes-58jtoznik1zy7ok

            
         <div>
            <h3>All Shoes ({allShoes.length})</h3>
            {allShoes.map(item => {
                return (
                <section key={item.id} style={{display: 'flex'}}>
                    <div>
                        <img src={item.image} alt={item.name}/>
                        <p>{item.name}</p>
                        <p>{item.subTitle}</p>
                        <p>{item.price}</p>
                    </div>
                    
                </section>)
            })}
        </div>

【问题讨论】：

您需要显示完整的 CSS。还是只有内联 CSS？
现在只是内联 CSS 用于测试目的。这是迄今为止我添加的唯一样式。在我做对这部分之前不想添加更多内容。
您只是将“flex”应用于第一个子 div。删除该包装器 div 或将“flex”添加到部分内的 div

标签： javascript css arrays reactjs flexbox

【解决方案1】：

您正在创建多个 section 元素，每个元素仅包含一个 div。

要让 div 连续显示，请创建一个 section 并在其中放入多个 divs。像这样的：

<div>
  <h3>All Shoes</h3>
  <section style="display: flex">
    {allShoes.map(item => {
      return (
        <div key={item.id}>
          <img src={item.image} alt={item.name}/>
          <p>{item.name}</p>
          <p>{item.subTitle}</p>
          <p>{item.price}</p>
        </div>)
    })}
  </section>
</div>

这是呈现的 HTML 的样子：

section {
  background-color: #a0a0a0;
}
section:before {
  content: "section";
  padding: 1rem;
  color: #606060;
}
section div {
  margin: 4px;
  border: 1px solid gray;
  background-color: white;
}
section div p {
  padding-left: 0.5rem;
  margin: 0;
}

<div>
  <h3>All Shoes</h3>
  
  <!-- a single section with flex -->
  <section style="display: flex;">
  
    <!-- containing multiple divs -->
    <div>
      <img src="https://via.placeholder.com/140" />
      <p>item.name</p>
      <p>item.subTitle</p>
      <p>item.price</p>
    </div>

    <div>
      <img src="https://via.placeholder.com/140" />
      <p>item.name</p>
      <p>item.subTitle</p>
      <p>item.price</p>
    </div>

    <div>
      <img src="https://via.placeholder.com/140" />
      <p>item.name</p>
      <p>item.subTitle</p>
      <p>item.price</p>
    </div>

  </section>
</div>

【讨论】：