Html 具有多个子项的Flex box列

我有一个问题，如果我可以这样做：

使用flex-box，在包装器中只使用三个div（我想制作两列会更容易，一列包装第一个大div，另一列包装另外两个块，但我想尝试前面提到的方法）

#行{
保证金：0自动；
宽度：610px；
}
#包装纸{
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
-ms柔性方向：行；
弯曲方向：行；
-webkit柔性包装：包装；
-ms-flex-wrap:wrap；
柔性包装：包装；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit align内容：flex开始；
-ms柔性线组件：开始；
调整内容：灵活启动；
-webkit对齐项：flex开始；
-ms-flex-align：开始；
调整项目：灵活启动；
}
#x-1，
#x-2，
#x-3{
保证金：5px；
背景色：红色；
}
#x-1{
高度：250px；
-网络工具包订单：0；
-ms弹性订单：0；
顺序：0；
-webkit flex:1300像素；
-ms flex:1300像素；
flex:1300像素；
-webkit-align-self：拉伸；
-ms flex项目对齐：拉伸；
自我调整：伸展；
}
#x-2{
-网络工具包订单：0；
-ms弹性订单：0；
顺序：0；
-webkit flex:1200px；
-ms-flex:1200px；
flex:1200px；
-webkit自动对齐：自动；
-ms flex项目对齐：自动；
自对准：自动；
}
#x-3{
-网络工具包订单：0；
-ms弹性订单：0；
顺序：0；
-webkit flex:1200px；
-ms-flex:1200px；
flex:1200px；
-webkit自动对齐：自动；
-ms flex项目对齐：自动；
自对准：自动；
}
#x-2，
#x-3{
高度：50px；
}

兼容性：Safari需要

-webkit-

前缀

• 为父对象指定一个高度以及

  柔性流：列换行
  。这将导致重叠的子项在列中换行
  
  

• 使用

  flex:10

  ，为第一个flex子对象指定与父对象相同的高度，并且不允许其收缩。这将把它的同级推到另一列

• 给其他同级

  flex:1

  均匀分配其余列之间的高度

例子

*{
填充：0；
保证金：0；
}
#包装纸{
显示器：flex；
柔性流：柱包裹；
高度：200px；
宽度：300px；
填充物：5px；
保证金：0自动；
}
#包装器>div{
背景色：红色；
}
#x-1{
弹性：10100%；
右边距：5px；
}
#x-2{
弹性：1；
边缘底部：5px；
}
#x-3{
弹性：1；
}