英文:
Material UI Stack flexbox full width
问题
如何在不使用 width:100% 的情况下使用 flexbox 使 Item 2 充满整个宽度？
<Box sx={{ width: '100%' }}>
<Stack spacing={2} alignItems="flex-start">
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</Box>
英文:
How can I make Item 2 full width without width:100% using flexbox?
<Box sx={{ width: '100%' }}>
<Stack spacing={2} alignItems="flex-start">
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</Box>
答案1
得分: 1
如果您希望项目2尽可能多地增长，可以执行以下操作：
flex: 1;
但您必须确保父Stack组件是
display: flex;
但请详细说明您希望项目2如何显示。如果您希望它独占一行，或与其他两个项目共享同一行，请明确指定。
英文:
If you want Item 2 to grow as much as it can you can do:
flex: 1;
But you have to make sure that the parent Stack component is
display: flex;
But specify more in detail how exactly you want Item 2 to be displayed. If you want it to be alone in a single row, or share the same row as the other two items.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论