弹性包装纸+负边距

Question

我使用弹性框显示8个将动态调整页面大小的项目。如何强制它将项目分成两行？（每行4个）？

以下是相关片段：

（或者，如果您更喜欢jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/）

＆＃13;

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}
.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}
.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}

＆＃13;

<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>

＆＃13;

Answer 1

您已在容器上获得flex-wrap: wrap。这很好，因为它会覆盖默认值，即nowrap（source）。这就是项目不会在some cases中换行以形成网格的原因。

在这种情况下，主要问题是弹性项目flex-grow: 1。

flex-grow属性实际上并未调整弹性项目的大小。它的任务是在容器中分配可用空间（source）。因此无论屏幕尺寸有多小，每个项目都会获得线上自由空间的比例部分。

更具体地说，您的容器中有八个弹性项目。使用flex-grow: 1，每个人都可以获得线上1/8的可用空间。由于您的商品中没有任何内容，因此它们可以缩小到零宽度，并且永远不会换行。

解决方案是在项目上定义宽度。试试这个：

＆＃13;

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; /* explanation below */
  margin: 5px;
  height: 100px;
  background-color: blue;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

＆＃13;

在flex-grow: 1简写中定义flex后，flex-basis不需要25％，由于边距，实际上每行会产生三个项目

由于flex-grow将消耗行上的可用空间，flex-basis只需要足够大以强制执行换行。在这种情况下，使用flex-basis: 21%，边距有足够的空间，但第五个项目的空间不足。

Answer 2

为.child元素添加宽度。如果你想让它每行4个，我个人会在margin-left上使用百分比。

<强> DEMO

.child {
    display: inline-block;
    background: blue;
    margin: 10px 0 0 2%;
    flex-grow: 1;
    height: 100px;
    width: calc(100% * (1/4) - 10px - 1px);
}

Answer 3

这是另一个apporach。

你也可以用这种方式完成它：

.parent{
  display: flex;
  flex-wrap: wrap;
}

.child{
  width: 25%;
  box-sizing: border-box;
}

样品： https://codepen.io/capynet/pen/WOPBBm

更完整的样本： https://codepen.io/capynet/pen/JyYaba

Answer 4

<style type="text/css">
.parent{
    display: flex;
    flex-wrap: wrap;
}
.parent .child{
    flex: 1 1 25%;
}
</style>    
<div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>

希望它有所帮助。有关详细信息，请参阅此link

Answer 5

我会这样使用负边距和装订线来计算：

.parent {
  display: flex;
  flex-wrap: wrap;
  margin-top: -10px;
  margin-left: -10px;
}

.child {
  width: calc(25% - 10px);
  margin-left: 10px;
  margin-top: 10px;
}

演示： https://jsfiddle.net/9j2rvom4/

替代CSS网格方法：

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

演示： https://jsfiddle.net/jc2utfs3/

Answer 6

＆＃13;

String

＆＃13;

Fragment

＆＃13;

）

Answer 7

我相信这个例子更准确，更容易理解然后@dowomenfart。

.child {
    display: inline-block;
    margin: 0 1em;
    flex-grow: 1;
    width: calc(25% - 2em);
}

这可以实现相同的宽度计算，同时直接切割肉。数学变得更容易，em是new standard，因为它具有可扩展性和移动友好性。

Answer 8

弹性包装纸+负边距

为什么将Flex与display: inline-block进行对比？

Flex通过元素大小调整提供了更大的灵活性
内置白色间距崩溃（请参阅3 inline-block divs with exactly 33% width not fitting in parent）

为什么要保证金为负数？

对于边缘情况（即列中的第一个元素）使用SCSS或CSS-in-JS，或者设置默认边距并在以后消除外部边距。

实施

https://codepen.io/zurfyx/pen/BaBWpja

<div class="outerContainer">
    <div class="container">
        <div class="elementContainer">
            <div class="element">
            </div>
        </div>
        ...
    </div>
</div>

:root {
  --columns: 2;
  --betweenColumns: 20px; /* This value is doubled when no margin collapsing */
}

.outerContainer {
    overflow: hidden; /* Hide the negative margin */
}

.container {
    background-color: grey;
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--betweenColumns));
}

.elementContainer {
    display: flex; /* To prevent margin collapsing */
    width: calc(1/var(--columns) * 100% - 2 * var(--betweenColumns));
    margin: var(--betweenColumns);
}

.element {
    display: flex;
    border: 1px solid red;
    background-color: yellow;
    width: 100%;
    height: 42px;
}

Answer 9

这是另一种不使用<html> <head> <style type="text/css"> </style> <script type="text/javascript" src="jquery-2.1.0.js"></script> <script src="http://maps.googleapis.com/maps/api/js?" type="text/javascript"></script> <script type="text/javascript"> var mapOptions = { center: new google.maps.LatLng(-33.45, -70.66667), zoom: 11, mapTypeId: google.maps.MapTypeId.ROADMAP }; jQuery(document).ready(function(){ map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); }); </script> </head> <body> body test <div id="map_canvas">map test</div> </body> </html>的方式。

calc()

这就是它的全部内容。你可以通过尺寸来获得更美观的尺寸，但这就是想法。

Flexbox：每行4个项目

9 个答案:

替代CSS网格方法：

弹性包装纸+负边距

实施