CSS使兄弟姐妹的孩子在100％宽度的父母中具有相同的宽度和高度（正方形）

Question

我有一个宽度为“100%”（不是屏幕宽度）的父视图，我希望每个子视图具有相同的宽度和高度。

我的代码是：

<View style={styles.container}>
  <View style={styles.item} />
  <View style={styles.item} />
  <View style={styles.item} />
  <View style={styles.item} />
</View>

const styles = StyleSheet.create({
  container: {
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
  },
  item: {
    width: 75,
    height: 75,
    marginRight: 10,
    backgroundColor: "red",
  },
});

但这并不是对所有设备都有响应（在小型服务中，一些孩子会离开屏幕）...有没有其他方法可以做到这一点？

谢谢。

Answer 1

  container: {
    flexDirection: "row",
    alignItems: "center",
  },
  item: {
    flex: 1,
    aspectRatio: 1,
    backgroundColor: "red",
  },

适合您的情况的诀窍是 aspectRatio。只需让每个孩子 flex: 1，但纵横比为 1 以使它们成平方。

Answer 2

百分比宽度

可能有很多方法可以做到这一点，但首先想到的是将宽度设置为百分比。这使项目成为父项的百分比。

  item: {
    width: '30%',
    height: 75,
    marginRight: 10,
    backgroundColor: "red",
  }

如果您需要更灵活的东西，您可能需要研究响应式设计并为不同的屏幕尺寸设置断点。

弹性包裹

如果您希望内容保持固定大小，可以将其包裹在容器中。对于不同的屏幕尺寸，一行中的框可能比另一行多。

您可能需要更改一些样式，但包装看起来像这样

<View style={styles.container}>
  <View style={styles.item} />
  <View style={styles.item} />
  <View style={styles.item} />
  <View style={styles.item} />
</View>

const styles = StyleSheet.create({
  container: {
    width: "100%",
    justifyContent: 'space-between',
    flexDirection: "row",
    alignItems: "center",
    flexWrap: 'wrap',
  },
  item: {
    width: 75,
    height: 75,
    marginRight: 10,
    backgroundColor: "red",
  },
});

网格

如果您不喜欢每行可变数量的框，您可以制作一个网格。您将有一个容器、行，并且在每一行中都有您的盒子。

同样，您必须调整一些样式。

<Container style={styles.container}>
  <Row style={styles.row}>
    <Box />
    <Box />
  <Row />
  <Row style={styles.row}>
    <Box />
    <Box />
  <Row />
</Container>

const styles = StyleSheet.create({
  container: {
    width: "100%",
  },
  row: {
    width: "100%",
    justifyContent: 'space-between',
    flexDirection: "row",
    alignItems: "center",
  },
  item: {
    width: 75,
    height: 75,
    marginRight: 10,
    backgroundColor: "red",
  },
});