html - Flex 容器，在大屏幕上有四列，在小屏幕上有三列

Question

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

盒子之间应该有一个间隙，不管是多少，比如说 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 可能需要一点时间来适应，但是一旦您掌握了它，您就可以利用一个非常强大的 native 布局系统。这是一个更新的 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 。如果你打开 flex-grow 它将占用剩余的可用空间(为什么我在媒体查询中使用 min-width )。同样，如果您的内容开始溢出，它会缩小元素以适合容器内部。

就是这样，老实说，虽然 Sunil 认为这在某种程度上是在重新创建轮子，但您没有为如此微不足道的事情支付库的间接费用。对于 Paulie_D 的观点，它不一定是网格系统，但 float 也不是，直到我们在所有浏览器中支持 CSS 网格，flex 才可以用于组件级灵活布局。