Flexbox 帮助 [关闭]

【问题标题】：Flexbox assistance [closed]Flexbox 帮助 [关闭]
【发布时间】：2020-10-16 10:11:13
【问题描述】：

我目前正在练习 Flexbox 并尝试在我的网站上制作此布局，它有两个图像（1 个垂直和 1 个水平）和一个文本块，我希望它看起来像图像但似乎找不到解决方案

【问题讨论】：

Flexbox 布局更适合流展示。网格可能是您想要的演示的更好方法。对网格布局的任何广告，或者您只是为了使用 flexbox 设计而练习。
我知道这不是问题，但您可以在这些情况下使用引导程序。它真的让事情变得容易。结帐引导网格系统。
@jmrker 听起来不错，我目前只是自学 Web 开发，我想看看网格布局是否可行！

【解决方案1】：

我同意 cmets 的观点，即 CSS 网格更适合创建网格布局。但是，为了回答您的问题，请查看下面使用 Flexbox 的示例。

.container {
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 300px;
}

.left {
  background-color: #aaa;
  flex: 1;
}

.right {
  display: flex;
  flex: 2;
  flex-direction: column;
}

.top {
  background-color: #bbb;
  flex: 1;
}

.bottom {
  background-color: #ccc;
  flex: 1;
}

<div class="container">
  <div class="left"></div>
  
  <div class="right">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</div>

【讨论】：

我的英雄谢谢！！