Html Flex即使在nowrap之后也能继续包装？

我试图实现的是一个4块的布局。两个宽度为50%的块占据第一个部分，而第二个部分后面紧跟着另外两个块

我使用的是

flex

，因此如果我这样做，flex容器占据100%的宽度和高度，那么在没有包装的情况下，50%的空间应该被我的标记和css块占据

相反，它仍然包裹并占据一个段

正文{
宽度：100%；
高度：100vh；
}
#容器{
位置：相对位置；
宽度：100%；
高度：100vh；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit柔性包装：nowrap；
-ms-flex-wrap:nowrap；
柔性包装：nowrap；
}
col{}
瑞德先生{
身高：50%；
宽度：50%；
背景色：红色；
}
蓝先生{
身高：50%；
宽度：50%；
背景色：卡德蓝；
}
A.水{
身高：50%；
宽度：50%；
背景色：浅绿色；
}
黄先生{
身高：50%；
宽度：50%；
背景颜色：黄色；
}

---

您需要使用

wrap

而不是

nowrap

，并使用

flex:0 50%

而不是

width:50%

flex:050%

代表：

• flex-grow:0

  ：div的增长不会超过其基础

• flex-shrink:0

  ：div的收缩不会超过其基准值

• flex-basis:50%

  ：框的基本大小是其flex父级的50%

正文{
宽度：100%；
高度：100vh；
}
#容器{
位置：相对位置；
宽度：100%；
高度：100vh；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit柔性包装：包装；
-ms-flex-wrap:wrap；
柔性包装：包装；
}
col{}
瑞德先生{
身高：50%；
最大宽度：50%；
弹性：0.50%；
背景色：红色；
}
蓝先生{
身高：50%；
最大宽度：50%；
弹性：0.50%；
背景色：卡德蓝；
}
A.水{
身高：50%；
最大宽度：50%；
弹性：0.50%；
背景色：浅绿色；
}
黄先生{
身高：50%；
最大宽度：50%；
弹性：0.50%；
背景颜色：黄色；
}

似乎工作正常。这里没有包装。可能会发布您想要的问题和结果的图像。@CodeiSir，您可能还希望更正挂起的编辑中的[flex]标记。需要是[flexbox]（[flex]是另外一种东西）。@Michael_B这是我想要实现的，所以你所需要做的就是制作

flex wrap:wrap

（你有

nowrap

）。这将实现图像中的布局。但你的问题似乎与这一目标相矛盾。@Michael_B抱歉，我对Wrap的理解有误，因为Wrap意味着浏览器将自动控制宽度和高度，因此所有内容都可以放在一个屏幕上。所以我做了一个无包装，所以它没有这样做。