CSS Flexbox适用于桌面和移动设备上的2列和3列（包装）

Question

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

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

3柱： 这可能有点先进

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

提前非常感谢！

Answer 1

以下是您对三列的处理方式。我只是补充说，因为它有点棘手：

<强> HTML

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

<强> CSS

.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;
    }
}

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

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

希望这有帮助。

Answer 2

我认为桌面意味着屏幕宽度超过600px，移动更少。

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 */
}

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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 */
  }
}

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;