Question

我只想仅使用Flexbox在屏幕上拆分组件，以便它们显示在正确的位置。

我有3行，其中的文本字段具有与全宽相关的特定比例：

第1、2、1、1行
第2行：1、1
第3行：1、1、2

我尝试使用flexGrow和Box组件的宽度，但是没有成功。

预期结果：

我的结果：

使用以下代码：

<Box display="flex" p={1} bgcolor="background.paper">
    <Box m="0.5em" width={"50%"} bgcolor="grey.300">
        <TextField value="Half" fullWidth></TextField>
    </Box>
    <Box m="0.5em" width={"25%"}  bgcolor="grey.300">
        <TextField value="Quarter" fullWidth></TextField>
    </Box>
    <Box m="0.5em" width={"25%"} bgcolor="grey.300">
        <TextField value="Quarter" fullWidth></TextField>
    </Box>
</Box>

<Box display="flex" p={1} bgcolor="background.paper">
    <Box m="0.5em" width={"50%"} bgcolor="grey.300">
        <TextField value="Half" fullWidth></TextField>
    </Box>
    <Box m="0.5em" width={"50%"}  bgcolor="grey.300">
        <TextField value="Half" fullWidth></TextField>
    </Box>
</Box>

<Box display="flex" p={1} bgcolor="background.paper">
    <Box m="0.5em" width={"25%"} bgcolor="grey.300">
        <TextField value="Quarter" fullWidth></TextField>
    </Box>
    <Box m="0.5em" width={"25%"}  bgcolor="grey.300">
        <TextField value="Quarter" fullWidth></TextField>
    </Box>
    <Box m="0.5em" width={"50%"} bgcolor="grey.300">
        <TextField value="Half" fullWidth></TextField>
    </Box>
</Box>

有没有一种方法可以正确对齐文本字段。

Answer 1

我认为您没有考虑每个弹性项目提供的利润。

假设您拥有：

ROW <Box/> container width = 768px
ROW <Box/> container left+right padding = 16px
font size = 16px
margin 0.5em = 8px

第1行

number of box elements (i.e., flex items) = 3
summation of elements left+right margins = 3*(8*2) = 48px
width left for content = 768px - 48px - 16px = 704px
element 1 with 50% width = 704*0.5 = 352px
element 2 with 25% width = 704*0.25 = 176px
element 3 with 25% width = 704*0.25 = 176px
summation of width of element 2+3 = 352px

第2行

number of box elements (i.e., flex items) = 2
summation of elements left+right margin = 2*(8*2) = 32px
width left for content = 768px - 32px - 16px = 720px
element 1 with 50% width = 720*0.5 = 360px
element 2 with 50% width = 720*0.5 = 360px

第1行元素1宽度与第2行元素1宽度= 352 < 360

之间的比较

要解决此问题，您可以为相关的<Box/>元素分配更多宽度

<Box display="flex" p={1} bgcolor="background.paper">
  <Box m="0.5em" width={"50%"} bgcolor="grey.300">
    <TextField value="Half" fullWidth></TextField>
  </Box>
  <Box m="0.5em" width={"25%"} bgcolor="grey.300">
    <TextField value="Quarter" fullWidth></TextField>
  </Box>
  <Box m="0.5em" width={"25%"} bgcolor="grey.300">
    <TextField value="Quarter" fullWidth></TextField>
  </Box>
</Box>

<Box display="flex" p={1} bgcolor="background.paper">
  <Box m="0.5em" width={"50%"} bgcolor="grey.300">
    <TextField value="Half" fullWidth></TextField>
  </Box>
  <Box m="0.5em" width={"calc(50% + 1em)"} bgcolor="grey.300">
    <TextField value="Half" fullWidth></TextField>
  </Box>
</Box>

<Box display="flex" p={1} bgcolor="background.paper">
  <Box m="0.5em" width={"25%"} bgcolor="grey.300">
    <TextField value="Quarter" fullWidth></TextField>
  </Box>
  <Box m="0.5em" width={"25%"} bgcolor="grey.300">
    <TextField value="Quarter" fullWidth></TextField>
  </Box>
  <Box m="0.5em" width={"calc(50% + 2em)"} bgcolor="grey.300">
    <TextField value="Half" fullWidth></TextField>
  </Box>
</Box>

尽管这是一个解决方案，但我建议使用Grid。在那里，您已经可以使用xs，lg等道具指定在特定屏幕尺寸下需要多少柔韧性项目，以便您轻松控制响应速度

将Flexbox和flexGrow与Textfield结合使用

1 个答案: