在桌面和移动设备上为 2 列和 3 列编写 flexbox 代码（换行）答案

【问题标题】：Writing flexbox code for 2-column and 3-column on desktop and mobile (wrap)在桌面和移动设备上为 2 列和 3 列编写 flexbox 代码（换行）
【发布时间】：2015-08-22 04:23:04
【问题描述】：

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

2 列：
我认为，这可能非常简单：

3 列：
这可能更高级一点：

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

【问题讨论】：

标签： css flexbox

【解决方案1】：

以下是您对三列执行此操作的方法。我只是补充一下，因为它有点棘手：

.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/

如您所见，您可以为弹性项目设置列顺序。

希望这会有所帮助。

【讨论】：

带有侧边栏的页面呢？如何防止 flexbox 碰到它？
@Casimir 这与所问的问题完全不同，但是，这取决于您的 HTML 结构。如果您有特定问题，您应该在新问题中提出。

【解决方案2】：

我假设桌面意味着屏幕宽于 600 像素，移动设备则更少。

2列布局很简单：

body {
  display: flex;   /* Magic begins */
  flex-wrap: wrap; /* Allow multiple lines */
}
#left, #right {
  flex: 1 300px;   /* Initial width of 600px/2
                      Grow to fill remaining space */
  min-width: 0;    /* No minimal width */
}

body {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  font-weight: bold;
}
#left, #right {
  flex: 1 300px;
  min-width: 0;
  background: #f55;
  padding: 15px 0;
}
#right {
  background: #57f;
}

<div id="left">Left</div>
<div id="right">Right</div>

3 列只是稍微复杂一点：

body {
  display: flex;            /* Magic begins */
}
#left, #right, #middle {
  min-width: 0;             /* No minimal width */
}
#left, #right {
  flex-basis: 200px;        /* Initial width */
}
#middle {
  flex: 1;                  /* Take up remaining space */
}
@media screen and (max-width: 600px) { /* Mobile */
  body {
    flex-direction: column; /* Column layout */
  }
  #left, #right {
    flex-basis: auto;       /* Unset previous 200px */
  }
  #middle {
    order: 1;               /* Move to the end */
  }
}

body {
  display: flex;
  text-align: center;
  font-weight: bold;
}
#left, #right, #middle {
  min-width: 0;
  padding: 15px 0;
}
#left, #right {
  flex-basis: 200px;
  background: #f55;
}
#right {
  background: #57f;
}
#middle {
  flex: 1;
  background: #5f6;
}
@media screen and (max-width: 600px) {
  body {
    flex-direction: column;
  }
  #left, #right {
    flex-basis: auto;
  }
  #middle {
    order: 1;
  }
}

<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>

【讨论】：

谢谢！您的 2 列代码效果很好，但不是 3 列代码。 disinfor 的解决方案适用于此。