Question

我一直在尝试使用Flexbox布局模式实现以下布局，但没有成功，现在我想知道它是否可能。

我可以像在图片中那样进行布局，但是需要在主容器内使用两个以上的容器用于列，但这样我无法在屏幕宽度发生变化时以我想要的方式控制项目的位置。

链接到图片：https://www.dropbox.com/s/yxuf253ywzsr831/desired_effect.png?dl=0

Answer 1

我认为您可以通过弹性框排序和媒体查询实现类似的行为

当宽度发生变化时，您应该更改弹性项目的顺序

/*for example*/

@media (max-width:200px) { 
    .flex4{
        order:2;
    }   
}

我刚刚创建了两个版本的布局，但您可能必须根据您的要求使用媒体查询。

＆＃13;

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  flex-flow:column wrap;
  width:300px;
  height:350px;
}

.flex-container-comp {
  padding: 0;
  margin: 0;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  flex-flow:column wrap;
  width:300px;
}

.flex-item {
  background: tomato;
  border: 5px solid red;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  height:100px;
}

.flex1{
    order:1;
}

.flex2{
    order:2;
}

.flex3{
    order:3;
}

.flex4{
  height:200px;
  order:4;
}

.flex5{
  order:5;
}

.flex6{
  order:6;
}

.flex-comp1{
    order:1;
}

.flex-comp2{
    order:3;
}

.flex-comp3{
    order:4;
}

.flex-comp4{
  height:200px;
  order:2;
}

.flex-comp5{
  order:5;
}

.flex-comp6{
  order:6;
}

＆＃13;

<ul class="flex-container">
  <li class="flex-item flex1">1</li>
  <li class="flex-item flex2">2</li>
   <li class="flex-item flex3">3</li>
  <li class="flex-item flex4">4</li>
   <li class="flex-item flex5">5</li>
</ul>
<br/>
<br/>
<br/>
<ul class="flex-container-comp">
  <li class="flex-item flex-comp1">1</li>
  <li class="flex-item flex-comp2">2</li>
   <li class="flex-item flex-comp3">3</li>
  <li class="flex-item flex-comp4">4</li>
   <li class="flex-item flex-comp5">5</li>
  <li class="flex-item flex-comp6">6</li>
</ul>

＆＃13;

Answer 2

我不确定你所遵循的确切行为所以如果你想在“宽屏”模式下让左列的宽度与右列不同，那么我就会非常灵活。这使用媒体查询来更改flexbox中div的“顺序”。它还使用javascript来管理整个元素的宽度和高度。使用下面窗口的宽度很难玩，所以你可以在这里玩它： https://jsfiddle.net/FrancisMacDougall/srgmpgx0/

var ids = {
  flex1: { hmul:0.32 },
  flex2: { hmul:0.32 },
  flex3: { hmul:0.32 },
  flex4: { hmul:0.64 },
  flex5: { hmul:0.32 }
};
function resize() {
  var container = document.getElementById("container");
  var xoff = container.offsetLeft;
  var yoff = container.offsetTop;
  var w = container.offsetWidth;
  var h = (window.innerHeight - yoff) - 8;
  var big = (window.innerWidth>500);

  document.getElementById("dimensions").innerHTML = 
    "Size: "+ window.innerWidth + " x " + window.innerHeight;

  if(big)
    container.style.maxHeight = h + "px";
  else
    container.style.maxHeight = (h*3) + "px";

  Object.keys(ids).forEach(function (id) {
    var el = document.getElementById(id);
    el.style.height = (h * ids[id].hmul) + "px";
  });
}
window.onload = function(e) {
  resize();
}
window.onresize = function(e) {
  resize();
}

*, *:before, *:after { box-sizing: border-box; }
body { color: black; background: gray; font-size: .1in }

@media screen and (min-width: 501px) {
    body { background: yellow; }
    .flex1 { order:1; width:40%;}
    .flex2 { order:2; width:40%;}
    .flex3 { order:3; width:40%;}
    .flex4 { order:4; width:60%;}
    .flex5 { order:5; width:60%;}
    .flex-container{ flex-wrap:wrap; }
}
@media screen and (max-width: 500px){
    body { background: green; }
    .flex1 { order:1; width:100%;}
    .flex2 { order:3; width:100%;}
    .flex3 { order:4; width:100%;}
    .flex4 { order:2; width:100%;}
    .flex5 { order:5; width:100%;}
    .flex-container{ flex-wrap:nowrap; }
}
.flex-container {
  display: flex;
  flex-direction:column;
  align-items: center;
  overflow-y:auto;
  overflow-x:hidden;
  background-color: #ccc;
}

.flex-item {
  border: 1px solid red;
  background: tomato;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<div id="dimensions"></div>
<div id="container" class="flex-container">
  <div id="flex1" class="flex-item flex1">1</div>
  <div id="flex2" class="flex-item flex2">2</div>
  <div id="flex3" class="flex-item flex3">3</div>
  <div id="flex4" class="flex-item flex4">4</div>
  <div id="flex5" class="flex-item flex5">5</div>
</div>

这种布局在Flexbox中是否可行？

2 个答案: