Html Css Flex显示为行，两项显示为列

是否可以将项目显示为行，但将两个项目显示为列

我想这样展示

.nav{
高度：44px；
边框：1px实心#000；
显示器：flex；
弯曲方向：行；
}
.项目{
文字装饰：无；
边框：1px实心#000；
宽度：60px；
文本对齐：居中；
}
.item.inline{
背景：轻珊瑚；
高度：20px；
}

**HTML：**

看起来像行的包装列：

.nav、.item{
框大小：边框框；
边框：1px实心#000；
}
.导航{
显示器：flex；
柔性流：柱包裹；
调整内容：灵活启动；
高度：44px；
}
.项目{
宽度：60px；
身高：100%；
文本对齐：居中；
文字装饰：无；
}
.item.inline{
背景：轻珊瑚；
身高：50%；
}

@DuyHung，很乐意帮忙！如果您希望动态地（根据每个项目内容进行调整），您需要包装项目4和5，使用脚本或CSS网格。