html - 有没有办法用flexbox构建这种布局？(Is there a way to build this layout with flexbox?)

Question

Hi I am trying to build this layout with flexbox.I provided my current code because i dont know how to move further.Even i posted image how iut should look like under the code.I tried everything but i cant achieve these result.

(嗨，我正在尝试使用flexbox构建此布局。我提供了当前的代码，因为我不知道如何进一步移动。即使我发布了图像，代码下的iut外观也是如此。我尝试了所有操作，但无法实现这些结果。)

Columns 2,3,5,6,7,8 must be same size.

(第2、3、5、6、7、8列的大小必须相同。)

Im new to flex box and i really want to achieve this goal.

(我是flex box的新手，我真的很想实现这个目标。)

Thanks for any help.

(谢谢你的帮助。)

 .tall { height: 300px; } .content { display: flex; height: 100%; } .left { display: flex; flex-direction: column; flex: 1; } .box { padding-bottom: 50px; } .right3collumns { display: flex; flex-direction: column; flex: 2; } .box2:nth-child(1) { background-color: teal; } .box2:nth-child(2) { background-color: red; } .box2:nth-child(3) { background-color: blue; } .right { flex: 2; background: #22B14C; } .right2 { display: flex; flex-basis: 200px; flex-direction: column; background-color: red; } .right2small { flex-basis: 100px; background-color: turquoise; } .box:nth-child(1) { background: #ED1C24; } .box:nth-child(2) { background: #00A2E8; } .box:nth-child(3) { background: #FFAEC9; } 

 <div class="content"> <div class="right"> <img src="assets/group.png" alt="group"> </div> <div class="left"> <div class="box">Small DIv</div> <div class="box">Small DIv</div> </div> <div class="right2">bigger</div> <div class="right2small">smaller</div> <div class="right3collumns"> <div class="box2">Small DIv</div> <div class="box2">Small DIv</div> <div class="box2">Small DIv</div> </div> </div> 

  ask by codeHysteria translate from so

Answer 1

Here is one way of achieving the layout, I strongly advise, if you can, to use CSS Grid instead.

(这是一种实现布局的方法，如果可能的话，我强烈建议改用CSS Grid。)

 .grid { display: flex; flex: 1; } .grid--col { flex-direction: column; } .grid__item { display: flex; justify-content: center; align-items: center; flex: 1; border: 1px solid #ddd; } .grid__item--x2 { flex: 2; } .grid--main { background: #f5f5f5; border: 1px dashed #999; max-width: 960px; margin: 50px auto; } 

 <div class="grid grid--main"> <div class="grid__item">1</div> <div class="grid__item grid__item--x2"> <div class="grid grid--col"> <div class="grid"> <div class="grid__item">2</div> <div class="grid__item grid__item--x2">4</div> <div class="grid__item">8</div> </div> <div class="grid"> <div class="grid__item">3</div> <div class="grid__item">5</div> <div class="grid__item">6</div> <div class="grid__item">7</div> </div> </div> </div> </div> 

You can modify the CSS/SCSS code to change the layout for different breakpoints using the CSS @media rules.

(您可以使用CSS @media规则修改CSS / SCSS代码以更改不同断点的布局。)

For example, you can have everything stacked, when the viewport is less than or equal to 960px.

(例如，当视口小于或等于960px时，您可以堆叠所有内容。)

@media only screen and (max-width: 960px) {
  .grid {
      flex-direction: column;
  }
}

 .grid { display: flex; flex: 1; } .grid--col { flex-direction: column; } .grid__item { display: flex; justify-content: center; align-items: center; flex: 1; border: 1px solid #ddd; } .grid__item--x2 { flex: 2; } .grid--main { background: #f5f5f5; border: 1px dashed #999; max-width: 960px; margin: 50px auto; } @media only screen and (max-width: 960px) { .grid { flex-direction: column; } } 

 <div class="grid grid--main"> <div class="grid__item">1</div> <div class="grid__item grid__item--x2"> <div class="grid grid--col"> <div class="grid"> <div class="grid__item">2</div> <div class="grid__item grid__item--x2">4</div> <div class="grid__item">8</div> </div> <div class="grid"> <div class="grid__item">3</div> <div class="grid__item">5</div> <div class="grid__item">6</div> <div class="grid__item">7</div> </div> </div> </div> </div>