Flexbox布局模式：3正方形排序（1大左，2小右堆积） [英] Flexbox Layout Pattern: 3 Squares ordered (1 large left, 2 small right stacked)

问题描述

HTML：

 < ul class =box-wrapper> 
< li class =box boxa> BOX A< / li> 
< li class =box boxb> BOX B< / li> 
< li class =box boxc> BOX C< / li> 
< / ul> 
  

CSS：

 code> .box-wrapper {
 display：flex; 
} 
 .boxa {
 order：1; 
 //应该是：width：50％; 
 //应该是：height：100％; 
} 
 .boxb {
 order：3; 
 //应该是：width：50％; 
 //应该是：height：100％; 
} 
 .boxc {
 order：2; 
 //应该是：width：50％; 
 //应该是：height：100％; 
} 
  

浮动框b和box-c似乎无效我希望任何人都可以帮助我在这一个。
更改HTML布局不是这个选项。

解决方案

使用flexbox你需要一个可计算的）高度以实现此而不改变HTML

。

  * {margin：0; padding：0;}。box-wrapper {display：flex; flex-direction：column; flex-wrap：wrap; height：200px; list-style-type：none;}。boxa {background：red; flex：0 0 100％; width：50％;}。boxb {background：orange; order：2} .boxc {background：lightgreen;}。boxb，.boxc {flex：0 0 50％; width：50％;}  

 < ul class = box-wrapper> < li class =box boxa> BOX A< / li> < li class =box boxb> BOX B< / li> < li class =box boxc> BOX C< / li>< / ul>  

$ b

I'm trying to achive the following ordered layout with flexbox:

HTML:

<ul class="box-wrapper">
    <li class="box boxa">BOX A</li>
    <li class="box boxb">BOX B</li>
    <li class="box boxc">BOX C</li>
</ul>

CSS:

.box-wrapper{
    display:flex;
}
.boxa{
    order: 1;
    // should be: width: 50%;
    // should be: height: 100%;
}
.boxb{
    order: 3;
    // should be: width: 50%;
    // should be: height: 100%;
}
.boxc{
    order: 2;
    // should be: width: 50%;
    // should be: height: 100%;
}

Floating box-b and box-c don't seem to work, so I hope anyone can help me out on this one. Changing the HTML layout is not an option on this one.

解决方案

With flexbox you would need a known (or calculable) height to achieve this without changing the HTML.

* {
  margin: 0;
  padding: 0;
}
.box-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
  list-style-type: none;
}
.boxa {
  background: red;
  flex: 0 0 100%;
  width: 50%;
}
.boxb {
  background: orange;
  order: 2
}
.boxc {
  background: lightgreen;
}
.boxb,
.boxc {
  flex: 0 0 50%;
  width: 50%;
}

<ul class="box-wrapper">
  <li class="box boxa">BOX A</li>
  <li class="box boxb">BOX B</li>
  <li class="box boxc">BOX C</li>
</ul>

这篇关于Flexbox布局模式：3正方形排序（1大左，2小右堆积）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！