使用flex根据类型在右列或左列渲染数据

Question

我想创建从数组填充的 html 视图。

该视图有两列，根据元素类型，我想将元素放在桌面视图的左列或右列中。

对于移动视图，所有元素应显示在一列中，保持原始顺序。

可以用flex-box实现吗？

posts.map((i, index) => {

   // render items 
   // i.type === 'male' -> should be in left column
   // i.type === 'female' -> should be in right column
}
 
)

Answer 1

是的，你可以这样做；

<div className="container">
  {posts.map((post, index) => (
    <div key={index} className={`post ${post.type}`}>
      {post.content}
    </div>
  ))}
</div>

---

.container {
  display: flex;
  flex-wrap: wrap;
}

.post {
  flex: 0 0 50%;
  box-sizing: border-box;
}

.post.male {
  order: -1;
}

.post.female {
  order: 1;
}