css - Flexbox:将子宽度设置为 80%，同时将 flex-direction 设置为父列上的列

Question

我正在做一个 React Native 元素。容器的 flexDirection 设置为 column 并且我希望子项的宽度跨越父项的 80%。如果父级的 flexDirection 设置为 row，我会将 flex 值设置为 0.8 并完成它.限制是

1. 我不能在 child 周围再放一个容器。
2. 我不能给 child 一个固定的像素宽度。

这是一个playground解决这个问题。

Answer 1

我最近了解到，在 ReactNative 版本 0.42 之后，不仅支持宽度而且还支持以下属性的百分比单位:

• 填充
• 边距
• 宽度
• 高度
• 最小宽度
• 最小高度
• 最大宽度
• 最大高度
• flexBasis

如果您想了解更多信息，请点击此处 link到添加这个很棒的功能的实际提交。

我的问题的答案是只添加 80% 的百分比宽度 这是我的原创 fiddle添加了修复程序。