将弹性项目从项目列中移动到它自己的列答案

【问题标题】：Moving a flex item from inside a column of items to its own column将弹性项目从项目列中移动到它自己的列
【发布时间】：2017-03-24 05:57:49
【问题描述】：

如果我有一个带有flex-direction: column 的三个孩子的弹性容器，并且我想将中间的孩子向右移动，同时将第一个和第三个孩子向左移动，我该怎么做？

flexbox 是正确的方法还是其他更合适的方法？

这是我的尝试：

.container {
  display: flex;
  flex-flow: row wrap;
  @media (max-width: 840px) {
    flex-flow: column wrap;
  }
}
.red,
.green,
.blue {
  width: 50%;
  @media (max-width: 840px) {
    width: 100%;
  }
}
.red {
  background-color: red;
  height: 100px;
}
.green {
  background-color: green;
  height: 300px;
}
.blue {
  background-color: blue;
  height: 100px;
}

<div class="container">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

http://codepen.io/dye/pen/mOeZma

它很近，但不完全在那里。当绿色 div 向右移动时，红色和蓝色之间有很大的差距。

任何建议将不胜感激。谢谢！

【问题讨论】：

我认为最好的方法是定位第三个孩子absolute。

标签： html css flexbox

【解决方案1】：

首先让我说我喜欢 flexbox。您可能需要一些时间来了解它可以做的所有小事情。

如果我理解了这个问题，我认为这就是你想要的（你需要按下全屏按钮才能看到它的全部荣耀，因为我包含的内容少于 840 像素）。

body {
  margin: 0
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 400px
}
.blue,
.green,
.red {
  width: 50vw
}
.red {
  height: 100px;
  background: red
}
.green {
  height: 200px;
  order: 1;
  background: green
}
.blue {
  background: #00f;
  height: 300px
}
@media (max-width: 840px) {
  .container {
    height: auto
  }
  .blue,
  .green,
  .red {
    width: 100vw
  }
  .green {
    order: 0
  }
}

<div class="container">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

我已经手动设置了容器的高度来触发包装，并且我给了绿色一个正序，所以它位于列表的底部。虽然当它很小并且都在一列中时，我已经把订单拿走了，所以它又在中间了。

我希望这会有所帮助，并且永远不要放弃 flexbox ;-)

【讨论】：

这太完美了！谢谢！我也喜欢 flexbox，但我不擅长通过这样的复杂性进行推理。
如果左侧有动态高度，有没有办法使用你的方法？具体来说，蓝色的孩子（左下）会随着内容的添加而改变。随着蓝色的增长，我是否只是改变容器的高度？如果不指定高度，绿色将保持在蓝色以下。最佳做法是什么？

【解决方案2】：

答案是否定的。 Flexbox 没有您想要的灵活性，尤其是在您构建动态时。

如果这是静态的

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

.holder {
  width: 50%;
}
.holder .red, .holder .blue {
  width: 100%;
}

.red,
.green,
.blue {
  width: 50%;
}

.red {
  background-color: red;
  height: 100px;
}

.green {
  background-color: green;
  height: 300px;
}

.blue {
  background-color: blue;
  height: 100px;
}

<div class="container">
  <div class="holder">
    <div class="red"></div>
    <div class="blue"></div>
  </div>
  <div class="green"></div>
</div>

所以，答案可能在 javascript 中。

我更喜欢只使用砖石。

http://masonry.desandro.com/

说明是直截了当的。很容易设置。

【讨论】：

【解决方案3】：

.green{
  float: right;
}
.red,
.green,
.blue {
  width: 50%;
 display: inline-block;
}
.red {
  background-color: red;
  height: 100px;
}
.green {
  background-color: green;
  height: 300px;
}
.blue {
  background-color: blue;
  height: 100px;
}

   

<body>
    <div class="container">
      <div class="red"></div>
      <div class="green"></div>
      <div class="blue"></div>
    </div>
  </body>

我已经删除了 flex 框并改为 float。我认为要简单得多

【讨论】：

【解决方案4】：

将 order 属性添加到 .green 类。

.green {
    background-color: green;
    height: 300px;
    order: 1;
 }

您也可以对所有元素进行排序。

.red {
    background-color: red;
    height: 100px;
    order: 1;
}

.green {
    background-color: green;
    height: 300px;
    order: 3;
}

.blue {
    background-color: blue;
    height: 100px;
    order: 2;
}

【讨论】：

默认情况下，所有内容都是 0 顺序，这意味着它将按照页面中的顺序呈现。所以只给一个项目订单 1 会更多到最后:-)
当然，order的默认值为0(y)

【解决方案5】：

也许你应该只为最大宽度：840px 的容器打开 flex？对于更高的分辨率，您可以使容器显示块并将第一个和第三个 div 向左浮动和第二个向右浮动，仅此而已。

.container {
    @media (max-width: 840px) {
        display: flex;
        flex-flow: column wrap;
    }
}

.red,
.green,
.blue {
    width: 50%;
    @media (max-width: 840px) {
        width: 100%;
    }
}

.red {
    background-color: red;
    height: 100px;
    @media (min-width: 841px) {
        float: left;
    }
}

.green {
    background-color: green;
    height: 300px;
    @media (min-width: 841px) {
        float: right;
    }
}

.blue {
    background-color: blue;
    height: 100px;
    @media (min-width: 841px) {
        float: left;
    }
}

http://codepen.io/anon/pen/QGjegM

【讨论】：

【解决方案6】：

这些都不能直接回答您的问题，但可能对那些在未来遇到类似问题的人有用..

1。关于您希望保持两个左侧块与右侧（绿色）高度相同的可能性，您可以这样做（我添加了两个包装器，附加代码）

注意：jquery 仅用于演示目的

// the jquery is just to adjust height for vertical flex demonstration
$('adjustorator').click(function() {var heights = Array(100, 150, 200, 250, 300, 350, 450, 500);var height = heights[Math.floor(Math.random()*heights.length)];	$('.green').css('height', height)});

.container {
  display: flex;
  width: 100%;
}

.left, .right {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
}

.red, .blue, .green {
  width: 100%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
  height: 400px;
}

// scaffolding below, ignore
body { position: relative; }
adjustorator { display: flex; position: fixed; bottom: 0; left: 50%;transform: translateX(-50%);  padding: 4px 8px 2px 8px; font-variant: small-caps;  color: hsla(0, 0%, 80%, 1); background-color: hsla(0, 0%, 20%, 1); border-radius: 5px 5px 0px 0px; cursor: pointer;}
adjustorator:hover { background-color: hsla(200, 40%, 40%, 1); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="left">
    <div class="red"></div>
    <div class="blue"></div>
  </div>
  <div class="right">
    <div class="green"></div>
  </div>
</div>

<!-- scaffolding, ignore -->
<adjustorator>adjust height</adjustorator>

小提琴

https://jsfiddle.net/Hastig/42qzzhdu/

2我也会将我原来的（非）答案留给那些将来来这里寻找类似问题的解决方案的人

align-self: flex-end; 添加到 .green

小提琴

https://jsfiddle.net/Hastig/42qzzhdu/1/

【讨论】：