Question

我正在尝试在flexbox的帮助下创建网格布局。

我正在做的是我给左边和右边的父母负边距，然后给他的孩子左右两侧填充空间的填充量相同。

我正在尝试制作5列网格，当我使用flex: 1 1 20%时，所有列都不在同一行。最后一个包裹在下一行。这不应该是这种情况，因为flex-basis设置为20％，父级应该容纳一行中的所有五列。

但是当我尝试这样做时，第4个网格项目将被包裹在下一行。

这是此问题的工作代码。更新了codepen： https://codepen.io/vikrantnegi007/pen/BZwGJQ

感谢。

Answer 1

如果我将 bootstrap 添加到your codepen它可以正常工作，这意味着您还有一些其他问题我们无法在原始代码中看到。

请注意，根据您的图片设置，您的元素仍然可以换行

尽管如此，创建一个装订线，而不是使用负余量技巧，使用justify-content: space-around和flex-basis。

Updated codepen

//testing css
.buisness-blocks {min-height: 250px;}

//main css
.buisness-blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .block {
    flex-basis: calc(20% - 10px);
    outline: 1px solid;
  }
}

Answer 2

{1}是您要查找的CSS属性吗？

给box-sizing block box-sizing border-box，他们都是彼此相邻的：

.block {
  flex: 0 1 20%;
  padding-right: 10px;
  padding-left: 10px;
  outline: 1px solid;
  box-sizing: border-box;
}

https://codepen.io/anon/pen/vZeQjO

Answer 3

试试这个希望它的工作

.buisness-blocks {min-height: 250px;}


.buisness-blocks {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  margin-right: 0px;
  margin-left: 0px;

  .block {
    flex: 0 1 20%;
      -webkit-flex: 10;  /* Safari 6.1+ */
    -ms-flex: 10;  /* IE 10 */    
    flex: 2;
    padding-right: 10px;
    padding-left: 10px;
    outline: 1px solid;
  }
}

点击此处查看DEMO

Answer 4

如果您试图阻止您的flexbox模型包装，请尝试使用该属性：

flex-wrap: nowrap;

ie：https://codepen.io/anon/pen/rwGoBP

Answer 5

如果负边距不适用于display flex，但是您可以尝试使用transform：

在内部元素的CSS样式属性中，添加您想要的翻译。

示例：

transform: translateY(15px);

P.S .：转换并非可移植到所有浏览器。

负边距不适用于flexbox

5 个答案: