如何用Flexbox实现按类型分栏渲染，移动端保持单列排序？

完全可以用 Flexbox 实现部分需求，但如果要求移动端严格按原数组顺序显示、桌面端将同类型元素分别放在左右两列，纯 Flexbox 会有局限——因为 Flexbox 是一维布局，难以同时满足两种完全不同的排列规则。不过可以结合媒体查询和一些技巧，或者根据实际需求调整实现方式：

场景1：允许桌面端同类型元素按原顺序填充两列 #

如果桌面端不需要严格将所有 male 放在左列、所有 female 放在右列，只是让 male 优先左排列、female 优先右排列（比如原数组是 [male, female, male, female]，桌面端显示为左列两个 male，右列两个 female），可以用以下方案：

代码示例（React） #

import './styles.css';

function PostList({ posts }) {
  return (
    <div className="post-container">
      {posts.map((post, index) => (
        <div 
          key={index} 
          className={`post-item ${post.type}`}
        >
          {post.content}
        </div>
      ))}
    </div>
  );
}

CSS 样式 #

/* 移动端默认样式：单列按原顺序显示 */
.post-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.post-item {
  padding: 1rem;
  border: 1px solid #eee;
}

/* 桌面端样式：分两列，male 在前、female 在后 */
@media (min-width: 768px) {
  .post-container {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .post-item {
    width: calc(50% - 0.5rem);
  }

  .post-item.male {
    order: 1;
  }

  .post-item.female {
    order: 2;
  }
}

这种方案下，桌面端所有 male 项会先排列，填满左列后再往右列延伸；female 项会排在所有 male 项之后，填满右列后再往左列延伸。

场景2：桌面端严格分左右两列（同类型元素集中在一列） #

如果要求桌面端严格将所有 male 放在左列、所有 female 放在右列，同时移动端按原顺序显示，纯 Flexbox 无法单独实现，需要结合 CSS Grid 处理（更贴合需求）：

代码示例（React + Grid） #

import './styles.css';

function PostList({ posts }) {
  return (
    <div className="post-container">
      {posts.map((post, index) => (
        <div 
          key={index} 
          className={`post-item ${post.type}`}
          style={{ gridColumn: post.type === 'male' ? 1 : 2 }}
        >
          {post.content}
        </div>
      ))}
    </div>
  );
}

CSS 样式 #

/* 移动端默认样式：单列按原顺序显示 */
.post-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.post-item {
  padding: 1rem;
  border: 1px solid #eee;
}

/* 桌面端样式：Grid 分两列 */
@media (min-width: 768px) {
  .post-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

这种方案下，桌面端通过 Grid 指定每个项的列位置，male 项自动进入左列，female 项进入右列；移动端切换为 Flex 单列布局，保持原数组顺序。

内容的提问来源于stack exchange，提问作者macfly