如何安排弹性项目以占据容器的整个宽度？

Posted 2023-02-16

【中文标题】如何安排弹性项目以占据容器的整个宽度？

【英文标题】：How can I arrange the flex items to occupy full width of the container?

【发布时间】：2022-01-21 19:20:11

【问题描述】：

我正在尝试在 flex 行中排列 4 个 flex 项，这些项具有动态内容，因此无法为 flex 项指定宽度。

有没有办法让弹性项目动态减小它们的字体大小并占据容器的整个宽度？？

我在沙箱中尝试此操作，当内容无法容纳时，下面的代码将切断第 4 行。

应用组件：

function App() 
  const a = [12, 1234, 123456, 123456789];
  return (
    <View style=styles.app>
      a.map((element) => 
        return (
          <View style=styles.item>
            <Text style=[styles.text,  fontSize: 24 ]>element</Text>
          </View>
        );
      )
    </View>
  );

样式：

const styles = StyleSheet.create(
  app: 
    display: "flex",
    backgroundColor: "black",
    width: "100%",
    height: "20%",
    flexDirection: "row"
  ,
  text: 
    color: "white"
  ,
  item: 
    flexGrow: 0,
    flexShrink: 0,
    minWidth: "15%",
    borderStartWidth: 1,
    borderColor: "white",
    justifyContent: "center",
    padding: 5,
    alignItems: "flex-start"
  
);

截图：

【问题讨论】：

grow and shrink 应该是 1 如果你希望它们根据可用宽度压缩和扩展

【参考方案1】：

你已经设置了

flexGrow: 0,  
flexShrink: 0,

这会明确阻止您要求的行为。删除两者会将它们默认为 1 并允许它响应可用空间。