Html Flexbox辅助

Html Flexbox辅助,html,css,flexbox,Html,Css,Flexbox,我目前正在练习Flexbox,并试图在我的网站上进行此布局,它有两个图像(一个垂直,一个水平)和一块文本,我希望它看起来像图像,但似乎找不到解决方案 我同意CSS网格更适合创建网格布局的意见。不过,为了回答您的问题,请参见下面使用Flexbox的示例 .container{ 显示器:flex; 弯曲方向:行; 高度:200px; 宽度:300px; } .左{ 背景色:#aaa; 弹性:1; } .对{ 显示器:flex; 弹性:2; 弯曲方向:立柱; } .顶{ 背景色:#bbb; 弹性:1

我目前正在练习Flexbox,并试图在我的网站上进行此布局,它有两个图像(一个垂直,一个水平)和一块文本,我希望它看起来像图像,但似乎找不到解决方案


我同意CSS网格更适合创建网格布局的意见。不过,为了回答您的问题,请参见下面使用Flexbox的示例

.container{
显示器:flex;
弯曲方向:行;
高度:200px;
宽度:300px;
}
.左{
背景色:#aaa;
弹性:1;
}
.对{
显示器:flex;
弹性:2;
弯曲方向:立柱;
}
.顶{
背景色:#bbb;
弹性:1;
}
.底部{
背景色:#ccc;
弹性:1;
}


Flexbox布局更适合于流表示。对于您想要的演示,网格可能是一种更好的方法。对网格布局有任何异议,或者你只是练习使用flexbox设计。我知道这不是问题,但在这些情况下你可以使用引导。这真的让事情变得简单。签出引导网格系统。@jmrker听起来不错,我目前正在自学web开发,我会查看网格布局,看看是否有效!你是我的英雄,谢谢!!