Flex 容器，大屏幕上有四列，小屏幕上有三列答案

【问题标题】：Flex container with four columns on larger screens and three columns on smaller screensFlex 容器，大屏幕上有四列，小屏幕上有三列
【发布时间】：2016-11-02 07:53:03
【问题描述】：

我正在尝试构建一个简单的流体网格，例如 4 列和 3 行 728以上的屏幕，728px以下的3列4行。

框之间应该有一个间隙，不管多少，比如 20px 或百分比..

[] [] [] [] []
[] [] [] [] []
[] [] [] [] []

我有一个内边距为 20px 的容器：

html

<div id='container'>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
   <div class='item'>Name</div>
</div>

css：

#container{ padding:20px }

我对 flex 的工作原理感到困惑……有人可以帮助我吗？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

是的，flex 可能需要一点时间来适应，但是一旦你掌握了它，你就会利用一个非常强大的原生布局系统。这是您的答案的更新 jsbin，可以满足您的要求：http://jsbin.com/qocuwokeqa/edit?html,css,output

我会解释一下我做了什么：

#container {
  display: flex;
  flex-wrap: wrap;
}

这只是创建一个新的 flex 格式化上下文，并告诉它允许有多个 flex 行（默认情况下只有 1 个）。

.item {
  width: 23%;
  background: yellow;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 5px;
  flex: 1 1 auto;
}

其中大部分只是填充物，以使项目的位置更明显并给它们间距，需要注意的重要一点是 flex 简写：

flex: 1 1 auto

我总是建议使用 flex 速记，规范也是如此，因为它会重置它们各自的速记，从而为您提供预期的结果。但默认情况下它是 0 1 auto，这将转换为：

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

基本上，这告诉了正在布置其子项的 flex 容器，您希望它如何伸缩。如果您打开 flex-grow 它将占用剩余的可用空间（为什么我在媒体查询中使用 min-width ）。同样，如果您的内容开始溢出，它将缩小项目以适应容器内部。

就是这样，老实说，虽然 Sunil 认为这在一定程度上是在重新创建轮子，但对于如此微不足道的事情，您并没有 lib 的间接成本。在 Paulie_D 看来，它不一定是网格系统，但浮动也不是，直到我们在所有浏览器中都支持 CSS Grid 之前，flex 对于组件级灵活布局是可以的。

【讨论】：

【解决方案2】：

#container {
  display: flex;                     /* 1 */
  flex-wrap: wrap;                   /* 2 */
  text-align: center;                /* 3 */
}
#container > div {
  flex: 0 0 calc(25% - 10px);        /* 4 */
  margin: 5px;
}
@media ( max-width: 728px ) {
  #container > div { 
      flex-basis: calc(33% - 10px);  /* 5 */
  }  
}

<div id='container'>
  <div class='item'>[Name]</div>
  <div class='item'>[Name]</div>
  <div class='item'>[Name]</div>
  <div class='item'>[Name]</div>
  <div class='item'>[Name]</div>
  <div class='item'>[Name]</div>
  <div class='item'>[Name]</div>
  <div class='item'>[Name]</div>
  <div class='item'>[Name]</div>
  <div class='item'>[Name]</div>
  <div class='item'>[Name]</div>
  <div class='item'>[Name]</div>
</div>

jsFiddle

注意事项：

建立弹性容器
启用换行 (initial setting is flex-wrap: nowrap)
使弹性项目的内容居中
此规则强制每行四个项目。相当于：flex-grow: 0、flex-shrink: 0、flex-basis: //25% less margin space//。
此规则强制每行三个项目。

【讨论】：