負邊距不能與柔性盒一起使用

我正嘗試在柔性盒的幫助下創建網格佈局。負邊距不能與柔性盒一起使用

我正在做的是，我給左邊和右邊的父母負邊界，然後給它的孩子左邊和右邊的相同數量的填充排水溝空間。

我想使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

負邊距不能與柔性盒一起使用

回答

相關問題