负边距不能与柔性盒一起使用

我正尝试在柔性盒的帮助下创建网格布局。负边距不能与柔性盒一起使用

我正在做的是，我给左边和右边的父母负边界，然后给它的孩子左边和右边的相同数量的填充排水沟空间。

我想使5列网格，当我使用flex: 1 1 20%所有的列不会在同一行。最后一个包裹在下一行。这应该不是这样，因为flex-basis设置为20％，并且父级应该在一行中容纳所有五列。

但是，当我试图做到这一点，第四个网格项目被包装在下一行。

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

谢谢。

来源

2017-06-26 vikrantnegi007

而当你只需要使用'盒大小：边界盒;''上.block'？所有元素将位于同一行中。 – Huelfe

@Huelfe是box-sixing没有帮助。我已经在使用盒子大小。 – vikrantnegi007

然后你的codepen不完整。因为当我将代码片段添加到您的codepen时，您的元素将位于同一行中。 – Huelfe

如果我添加引导向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; 
    } 
}

来源

2017-06-26 13:24:22 LGSon

这是实现相同布局的不错方法。谢谢。但我仍然困惑为什么没有负边距工作，因为这个librabry似乎使用相同的方法。 https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css – vikrantnegi007

@ vikrantnegi007不能说为什么你的原稿不起作用，因为我看不到它。你的codepen（带引导）。您是否尝试将图像设置为“display：block”？ – LGSon

是的，我做到了。你能发给我你的代码的zip文件吗，这样你可以更好地看看完整的代码吗？这将是感激的。 – vikrantnegi007

是box-sizing您正在查找的CSS属性？

给block“SA的border-boxbox-sizing，他们都来彼此相邻：

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

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

来源

2017-06-26 12:56:18 Patrick

我正在使用bootstrap，因此box-sizing已经存在。这不适用于我的代码在实际的代码。 – vikrantnegi007

@ vikrantnegi007看[这里]（https://jsfiddle.net/q8wcu5ah/） –

'flex：2'用'flex-basis：0'覆盖'flex-basis：20％'。看看https://developer.mozilla.org/en/docs/Web/CSS/flex – Patrick

只是尝试这种希望其工作

.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

来源

2017-06-26 13:03:11

这个工程。但你能解释为什么吗？由于flex-wrap属性指定柔性项目是否应该包装，因此可以使用 – vikrantnegi007

。 –

我认为你有解决方案。 Happy Codding Bro :) –

如果你试图阻止你实现Flexbox模型从包裹尝试属性：

flex-wrap: nowrap;

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

来源

2017-06-26 13:12:10 Afrophysics

负边距不能与柔性盒一起使用

回答

相关问题