如何用Flex实现支持1列或带间距2列的网格布局

核心逻辑 #

通过Flex布局的方向控制与间距属性，配合子元素的弹性占比，轻松实现两种布局模式：

• 2列布局：横向排列，子元素平分宽度并保留间距
• 1列布局：纵向排列，子元素占满容器宽度

React Native 实现代码 #

import { View, StyleSheet, useWindowDimensions } from 'react-native';

// 通用布局容器组件
const FlexLayout = ({ children, forceOneColumn = false }) => {
  const { width } = useWindowDimensions();
  // 可根据屏幕宽度自动切换，或通过forceOneColumn强制指定
  const isTwoColumn = !forceOneColumn && width >= 768;

  return (
    <View style={[
      styles.baseContainer,
      isTwoColumn ? styles.twoColumnLayout : styles.oneColumnLayout
    ]}>
      {children}
    </View>
  );
};

const styles = StyleSheet.create({
  baseContainer: {
    padding: 16,
  },
  twoColumnLayout: {
    flexDirection: 'row',
    gap: 16, // 列间间距，匹配设计规范
  },
  oneColumnLayout: {
    flexDirection: 'column',
    gap: 12, // 1列时的上下间距，按需调整
  },
  // 硬编码的子View样式
  columnView: {
    flex: 1, // 2列时自动平分容器宽度
    padding: 12,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    // 其他自定义样式
  },
});

// 使用示例
// 自动适配屏幕的布局
<FlexLayout>
  <View style={styles.columnView}>列内容1</View>
  <View style={styles.columnView}>列内容2</View>
</FlexLayout>

// 强制1列布局
<FlexLayout forceOneColumn={true}>
  <View style={styles.columnView}>列内容1</View>
  <View style={styles.columnView}>列内容2</View>
</FlexLayout>

Web 端实现代码 #

/* 容器样式 */
.flex-container {
  padding: 1rem;
}

.two-column {
  display: flex;
  flex-direction: row;
  gap: 1rem; /* 列间间距 */
}

.one-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 1列时的上下间距 */
}

/* 硬编码子元素样式 */
.column-item {
  flex: 1;
  padding: 0.75rem;
  background-color: #f5f5f5;
  border-radius: 0.5rem;
}

/* 响应式自动切换（可选） */
@media (max-width: 768px) {
  .two-column {
    flex-direction: column;
  }
}

<!-- 使用示例 -->
<div class="flex-container two-column">
  <div class="column-item">列内容1</div>
  <div class="column-item">列内容2</div>
</div>

<div class="flex-container one-column">
  <div class="column-item">列内容1</div>
  <div class="column-item">列内容2</div>
</div>

关键说明 #

1. 硬编码的<View>（或Web的<div>）直接作为容器子元素即可，无需额外嵌套
2. gap属性用于设置列/行间距，替代传统的margin，更简洁且避免边缘间距问题
3. 子元素的flex: 1确保在2列布局时自动平分容器宽度，1列时占满宽度

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