[英]How to disable inline of a Flexbox
<Box backgroundColor="#fdfdfd" p={6}>
<Flex
justifyContent="center"
alignItems="center"
w="100%"
mt={5}
>
<Heading textAlign="left" fontSize="1.5rem" mb={5} display="block">
Những cán bộ của chúng tôi
</Heading>
{Data.map(userData => <UserInfo key={userData.id} data={userData} />)}
</Flex>
</Box>
The Heading
is inline, but I don't want to be inline
. Heading
是 inline ,但我不想成为inline
。 Is there any way to disable it?有没有办法禁用它?
If I mode Heading
above Flex
then it will look like this image如果我在
Flex
上方设置Heading
,那么它看起来像这个图像
That is due to the fact that the wrapper of the Heading
component is a Flex
box container.这是因为
Heading
组件的包装器是一个Flex
盒子容器。 to make Heading
sit on it own Row
You should wrap it inside a Box
element and set attribute w="100%"
like this使
Heading
位于它自己的Row
您应该将它包装在Box
元素中并像这样设置属性w="100%"
<Flex wrap="wrap">
<Box w="100%">
<Heading textAlign="left" fontSize="1.5rem" mb={5} display="block">
Những cán bộ của chúng tôi
</Heading>
</Box>
// here will go the {Data.map...}
<Box>
</Flex>
As Box
will be a flex item
sitting at the same level as UserInfo
which are return from the map
function.因为
Box
将是一个与UserInfo
处于同一级别的flex item
,它是从map
function 返回的。 It will take the entire horizontal space available and all other elements will go underneath It.它将占用整个可用的水平空间,所有其他元素将 go 在它下面。
You should add wrap
attribute to the Flex
Component so as the box take 100%
width available all other will go on a new line您应该将
wrap
属性添加到Flex
组件,以便该框采用100%
宽度可用,所有其他将 go 在新行上
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.