Html 使用flexbox的表格布局

我试图在flexbox中创建一个类似表格的布局，但它不起作用

我想要这样的东西：

< image > | < image > 

Text      | Text   

< image > Text | < image > Text

牛排
汉堡

就像你提到的那样简单。您应该将文本单独放在一个div中，并在

#item

中使用flex执行更多的操作。请参阅下面的代码

正文{
保证金：0
}
#主要背景{
背景：url（../img/bg.jpg）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
#容器{
/*宽度：100%；
身高：100%*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#项目{
-webkit弹性方向：行；/*Safari*/
柔性流：行换行；
字体系列：佐治亚，衬线；
字体大小：200%；
字体大小：粗体；
右边距：10px；
显示器：flex；
证明内容：中心；
}
img{
宽度：100%；
右边距：10px；
高度：150像素
}
最后一个孩子{
右边距：0
}

牛排
牛排

看看这个。你在等这个吗

#主背景{
背景：url（../img/bg.jpg）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
#容器{
/*宽度：100%；
身高：100%*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#项目{
利润率：10px；
-webkit弹性方向：行；/*Safari*/
弯曲方向：行；
字体系列：佐治亚，衬线；
字体大小：200%；
字体大小：粗体；
}

牛排

汉堡

flex direction属性仅适用于flex容器。在代码中，它位于flex项上。这是没有效果的。试试这个：

#容器{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
证明内容：中心；
}
#项目{
显示器：flex；
弯曲方向：立柱；
字体系列：佐治亚，衬线；
字体大小：200%；
字体大小：粗体；
利润率：10px；
}

牛排
汉堡