找不到适合此布局的弹性盒 [英] Can’t find the right flexbox for this layout

问题描述

随着picturr展示我的想法，我想设计一个网站.我想用flexbox整理页面，但我不知道该怎么做...

I would like to design a website as the picturr shows my idea. I would like to organize my page with flexbox but I don’t know how I can do it...

推荐答案

为此使用网格，类似的东西将为您提供所需的布局-

Use grid for that, something like that will get you the desired layout -

 .container {  
        display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          grid-template-areas: "area-1 area-3" "area-2 area-3";
        }
        
        .child-1 {
          grid-area: area-1;
        }
        .child-2 {
          grid-area: area-2;
        }
        .child-3 {
          grid-area: area-3;
        }

 <div class="container">
      <div class="child-1">One</div>
      <div class="child-2">Two</div>
      <div class="child-3">Three</div>
  </div>

网格用于二维布局，flex用于一维布局.

Grid is for two-dimensional layouts, flex for one-dimensional.

这篇关于找不到适合此布局的弹性盒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！