負邊距不適用於Flexbox

Question

我正在嘗試在flexbox的幫助下創建網格布局。

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

我正在嘗試制作5列網格，當我使用flex: 1 1 20%所有列都不在同一行中。 最后一個包裝在下一行中。 情況並非如此，因為flex-basis設置為20％，並且父級應將所有五列容納在一行中。

但是，當我嘗試執行此操作時，第4個網格項將被換行。

這是此問題的有效代碼筆。 更新了代碼筆： https ://codepen.io/vikrantnegi007/pen/BZwGJQ

謝謝。

Answer 1

如果我將引導程序添加到您的代碼筆中，它將起作用，這意味着您還有其他問題，我們在原始代碼中看不到。

不過請注意，根據圖片的設置，元素仍可能會

不過，不要做一些負面的保證金技巧，而是創建一個裝訂線 ，使用justify-content: space-around和flex-basis 。

更新的代碼筆

//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

是否在對您要查找的CSS屬性box-sizing ？

給block一個box-sizing border-box box-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

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;
  }
}

點擊這里進行演示

Answer 4

如果您嘗試阻止Flexbox模型包裝，請嘗試使用屬性：

flex-wrap: nowrap;

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

Answer 5

如果負邊距不適用於display flex，但是您可以嘗試使用transform：

在內部元素的CSS樣式屬性中，添加您想要的翻譯。

例：

transform: translateY(15px);

PS：轉換並非可移植到所有瀏覽器。