Reactjs React Native：使用flexbox的独立于设备的正方形网格

如果用户有iPad或iPhone，我想用正方形独立显示相同的网格，相应地增加正方形的大小

我不想检测设备并根据屏幕大小更改正方形的宽度和高度。 是否可以只使用React Native的css flex功能

这是

---

当前（撰写本文时为0.33.0）（使用

flexDirection

和

flex

）只能提供均匀的宽度或高度，但不能同时提供两者。你为什么不想用它来测量屏幕大小呢？

有一个技巧可以让你用flexbox创建一个正方形网格，也许你可以用它来反应

示例：

首先，我创建了一个

flexbox

，其中一行有3个框，可以包装成多行：

.flexbox {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.flexbox > * {
  margin: 5px;
  text-align: center;
  border: 1px solid red;
  flex-basis: calc(33.33% - 10px);
}

注

flex-basis:calc（33.33%-10px）

允许在一行中保留3个框-更改此设置以容纳更多框。（

10px

这是边距的两倍）

下面是使它们成为正方形的技巧-制作一个伪

内联块

元素，该元素具有

填充底部：100%

。（如果以百分比表示填充/边距，则总是根据宽度计算）

让我知道你对此的反馈。谢谢

正文{
填充：0；
保证金：0；
}
* {
框大小：边框框；
}
.flexbox{
列表样式：无；
显示器：flex；
柔性包装：包装；
}
.flexbox>*{
保证金：5px；
文本对齐：居中；
边框：1px纯红；
弹性基础：计算（33.33%-10px）；
}
.flexbox>*：之前{
内容：''；
垫底：100%；
身高：100%；
显示：内联块；
垂直对齐：中间对齐；
}

这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字
这里有一些文字

添加

aspectRatio:1

---

在组件样式中，如果宽度或高度已经由a

flex:1设置，它将为您生成其他值
 Dimension是我现在用来放大正方形的方法，但在我看来，根据屏幕宽度和高度计算固定大小是一种错误的方法。如果你看看我在@kukkuz的答案上写的评论，你可能可以尝试使用0.34.0-rc上的
flexBasis
属性，但看起来你仍然需要手动测量33%的宽度减去一些余量。在这种情况下，手动测量尺寸没有什么错，在（大部分是本地的）移动开发中，测量尺寸是一种非常常见的做法。@Ronnie，你介意分享一下你如何进行测量的代码吗？可能有一种更简单的方法来进行计算。看起来，
flexBasis
最近被添加到React Native中，但没有文档记录。您应该尝试使用它，但是，我不知道如何模拟
calc（33.33%-10px）
，因为
flexBasis
需要一个数字作为道具。哦，原来
flexBasis
在0.34.0-rc上。嗯，我不太了解
react native
。。。希望这个答案能帮助你找到一种方法……：）仅供参考：如果
flex-basis
不起作用，您可以使用
min-width:calc（33.33%-10px）
甚至
width:calc（33.33%-10px）
。。。guess
calc
可以通过某种方式进行模拟……他很可能需要计算
宽度。
.flexbox > *:before {
  content: '';
  padding-bottom: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}