Question

我试图建立一个简单的流体网格，比如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如何运作感到困惑......有人可以帮助我吗？

Answer 1

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

我会解释一下我的所作所为：

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

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

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

这大部分只是填充物，使物品的位置更加明显，并给它们间距，重要的一点是弯曲速记：

flex: 1 1 auto

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

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

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

就是这样，老实说，虽然Sunil有一个观点，即在某种程度上重新创建了这个轮子，但是你没有像lib这样微不足道的开销。而对于Paulie_D而言，它不一定是网格系统，但也不是浮点数，直到我们在所有浏览器中都支持CSS网格，flex才适合组件级灵活布局。

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

jsFiddle

注意：

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

Flex容器在较大的屏幕上有四列，在较小的屏幕上有三列

2 个答案:

jsFiddle