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

【问题标题】：Flexbox: set child width to 80% while flex-direction is set to column on the parentFlexbox：将子宽度设置为 80%，同时将 flex-direction 设置为父列上的列
【发布时间】：2017-11-05 17:44:29
【问题描述】：

我正在开发一个 React Native 项目。容器的flexDirection 设置为column，我希望孩子的宽度跨越父母的80%。如果父母的flexDirection 设置为row，我会将flex 的值设置为0.8 并完成它。限制是

我不能在孩子周围放一个额外的容器。
我不能给孩子一个固定的像素宽度。

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

【问题讨论】：

width:'80%' 不起作用吗？

标签： css react-native flexbox react-native-flexbox

【解决方案1】：

我最近了解到，在 ReactNative 0.42 版之后，不仅支持宽度，还支持以下属性：

padding
margin
width
height
minWidth
minHeight
maxWidth
maxHeight
flexBasis

如果您想了解更多信息，请在此处添加 link 以添加此超棒功能的实际提交。

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

【讨论】：

如我所想。 :D

【解决方案2】：

您可以通过以下方式访问屏幕尺寸：

const {width, height} = require('Dimensions').get('window');

在您的顶级导入；然后，在您的风格中使用：

child: {
   width: width*0.8
},
.
.
.

【讨论】：

谢谢，我已经考虑过这个，如果没有办法只使用 flexbox，我会使用它作为最后的手段。