Html 将多个元素与flex对齐

我想用flexbox做一些类似的事情：

.包裹{ 显示器：flex； 柔性包装：包装； } .elem1{ 宽度：20%； 高度：100px； 边框：1px纯红； } .elem2、.elem3{ 宽度：75%； 边框：1px纯红； } 1. 2. 3.

---

类似的内容可能会根据需要调整值：

一,。使用您的身高100px和宽度20%和75%：

* { 框大小：边框框； 填充：0； 保证金：0； } html， 身体{ 身高：100%； 宽度：100%； } .包裹{ 高度：100px； 显示器：flex； 柔性流：行换行； } .行{ 宽度：75%； 显示器：flex； 柔性流：柱包裹； } .elem1{ 宽度：20%； 边框：1px实心浅灰色； } .elem2{ 身高：50%； 边框：1px实心浅灰色； 弹性：1； 利润率：10px； } .elem3{ 身高：50%； 边框：1px实心浅灰色； 弹性：1； 利润率：10px； } 1. 2. 3. 切换到灵活方向：列

添加柔性包裹：包裹

定义容器的高度，以便flex项目知道包装的位置

框1将占用第一列中的所有空间，迫使以下框换行到新列

对HTML没有任何更改

.包裹{ 显示器：flex； 柔性包装：包装； 弯曲方向：列；/*新*/ 高度：100px；/*新*/ 对齐内容：间距；/*新建*/ } .elem1{ 宽度：20%； 弹性基准：100%；/*新*/ 边框：1px纯红； } elem2先生， .elem3{ 宽度：75%； 弹性基准：40%；/*新*/ 边框：1px纯红； } 1. 2. 3.

---

幸运的是，互联网上有一个很好的工具来实现这一点。只需复制HTML和CSS，像老板一样使用即可另一个开始使用Flexbox的好资源► 不，我不想改变我的HTML：你想要的布局不能用纯flexbox解决。正如Syden所说，您可以更改HTML，也可以使用position-absolute从flex布局中取出一个元素