Css 如何使用flex box均匀分布图像和子元素？

我正在react原生应用程序中向

添加一个图像和大量文本输入（floatLabeltInput）。到目前为止，我没有太多的运气使用

flex

属性在y轴上均匀地间隔图像和文本输入。 由于图像显示的高度太小，而剩余的浮动标签在y轴上占据了太多的高度

我已经在Expo react native沙箱中测试并模拟了应用程序的视图，以供参考，这里使用的CSS与我使用的相同：

• 1图像截断和文本输入占用太多高度：

• 2图像显示正确，但外部输入占用太多高度：

我也尝试过将flex属性设置为整个flex的一部分， 但这不会调整视图中图元间距的宽度或高度

问题：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:"column",
    //alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#ecf0f1'
  },
  image: {
    flex: 2/4,
    resizeMode: 'contain',
    width: 800,
    height: 800,
  },
  floatLabelTextInput: {
    flex: 2/4,
    padding: 8,
  },
});

如何使用flex box均匀分布图像和子元素

建议的布局：（这是我的目标布局，图像占据全视图宽度，40%的高度显示全图像，而图像下方的三个文本输入占据了40%，高度为20px）

渲染内容：（这是使用此布局样式渲染的内容，图像占据约10%的视图并被截断。其余三个文本输入占据约50%的视图，每个文本输入的高度约为50px，对于此布局来说都太高了

视图样式定义：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:"column",
    //alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#ecf0f1'
  },
  image: {
    flex: 2/4,
    resizeMode: 'contain',
    width: 800,
    height: 800,
  },
  floatLabelTextInput: {
    flex: 2/4,
    padding: 8,
  },
});

它看起来像react native floating label测试输入将您传入的样式道具应用于它维护的

TextInput

，其行为将不同于flex属性应用于外部容器

视图的情况

我猜您实际上不希望
TextInput
的大小是这样的，因为这会导致输入的大小与图像的大小相同。如果我正在处理这个问题，我可能会给输入一个固定的高度，然后对图像应用一个弹性样式。或者如果我知道图像的大小，我也可能给它一个固定的si泽

编辑：还值得注意的是，该软件包中的
视图
容器可能会引起一些麻烦，除非您将它们嵌套在自己的
视图
中，您可以在其中控制
高度
和/或
柔性
我不太确定是否得到了您想要实现的目标，但看看2/4 image和2/4 textinput，从这行
到目前为止，我没有太多的运气将图像和文本输入均匀地分布在y轴上
我相信您希望图像占据行的50%，而3个文本输入共同占据其余的50%

您可以从
react native
导入
维度
，然后执行

const ScreenWidth=Dimensions.get（'window'）.width；


然后使用
maxWidth
防止图像过大

这是我代码的SnackExpo

也许你可以在油漆上画个速写或者做点什么，告诉我们你想要什么，在哪里，你想要它看起来怎么样

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    // alignItems: 'center',
    // justifyContent: 'space-between',
    backgroundColor: 'lightgreen',
    maxWidth: ScreenWidth,
    paddingTop: 25,
  },
  image: {
    maxWidth: ScreenWidth*0.50,
    height: 200,
    // flex: 2/4,
    // resizeMode: 'contain',
    // width: 800,
    // height: 800,
  },
  floatLabelTextInput: {
    // flex: 2/4,
    // padding: 8,
  },
});


不要问我为什么，但它似乎是flexDirection:“行”做的事情：-我以前尝试过flex direction:“行”，但这会导致图像和文本框在我的物理设备上显示在一行中。我认为伊恩·蒙迪已经确定了以下主要问题。你必须将image的
flex
属性设置为1才能解决此问题。另外，我建议为图像设置
width:auto
并删除
height
属性。结果：（使用不同的图像）。如果您使用常规的
TextInput
而不是
floatLabelTestInput
，您将不会遇到这些问题。例如，这与您的想法类似吗？我想您已经确定了主要问题-具体地说，
floatLabelTestInput
包中的
flex
属性设置为1。我已经破解了它图像布局，但正如您在
floatLabelTestePut
中指出的那样，高度太大。我确实尝试在seylt定义中的每个位置设置一个显式的
高度：“40”
，但这对输入高度没有影响。对此有什么想法吗？我在问题中添加了一个拟议布局的模型，更多的是列布局而不是行布局。我可以获得正确的图像比例，但是当我将其添加到样式中时，
floatLabeltImpute
似乎不接受
height
属性。我通过使用您的建议，从
floatLabeltImpute
中删除flex并使用屏幕宽度来调整图像大小，成功地纠正了布局。似乎是一种更好的方法，包括正如@Ian Mundy所提到的，
floatLabelDemiPut
在所有情况下都将flex设为1。很高兴您能够从我给您的内容中找到解决方案！现在我知道floatLabelDemiPut是存在的！