在台式机和移动设备上为2列和3列编写Flexbox代码（自动换行） [英] Writing flexbox code for 2-column and 3-column on desktop and mobile (wrap)

问题描述

我很难弄清楚这个CSS flexbox解决方案。基本上有2个问题，一个是2列，另一个是3列布局。

I'm having a real hard time figuring out this CSS flexbox solution. Basically there are 2 issues, one with a 2-column and another with a 3-column layout.

2-Column：

这，我想想，可能很简单：

2-Column:
This, I think, may be pretty straightforward:

3列：

这可能更高级：

3-Column:
This is probably a bit more advanced:

容器类是 .container ，而孩子只是 .left ， .right 和。中间。不确定是否相关，但 .container 的宽度是视口的100％。我可能应该补充一点，由于无法控制的原因，无法使用Bootstrap。

The container class is, well, .container, and the children are just .left, .right, and .middle. Not sure if it's relevant, but the width of .container is 100% of viewport. I should probably add that using Bootstrap is not possible, due to reasons out of my control.

推荐答案

这是您的处理方式三列。我只添加它，因为它有点棘手：

Here's how you do it for the three columns. I'm only adding that, because it's a bit more tricky:

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}

.left {
  order: 1;
  background: red;
  flex-basis: 100%;
  height: 300px
}

.middle {
  order: 3;
  background: green;
  flex-basis: 100%;
  height: 300px;
}

.right {
  order: 2;
  background: yellow;
  flex-basis: 100%;
  height: 300px;
}

@media screen and (min-width:600px) {
  .container {
    flex-wrap: nowrap;
  }
  .left {
    flex-basis: 200px;
    order: 1;
  }
  .middle {
    flex-basis: 1;
    order: 2;
  }
  .right {
    flex-basis: 200px;
    order: 3;
  }
}

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

小提琴 http://jsfiddle.net/2touox81/

如您所见，您可以设置弹性商品的列顺序。

As you can see, you can set column order for flex items.

希望这会有所帮助。

这篇关于在台式机和移动设备上为2列和3列编写Flexbox代码（自动换行）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！