如何对齐我的显示：flex而不覆盖margin属性？

Question

我第一次尝试flex。我认为这将完美对齐，中间有均匀的空格，但出于某种原因，margin-right会作用于最后一个框。

如何使用正确的margin-right: 3%第一和第二，而不是三，使用margin-right: 0% !important;覆盖边距，而不是覆盖边距，让它们均匀分布。{/ p>

我明白了：

我做错了什么？

/* boxes sit in a page area div */
#pageArea {
  width: 96%;
  margin: 0px auto;
  padding: 0% 0 0% 0;
}


/* flex */
.evenly {
  display: flex;
  justify-content: space-between;
  border: solid;
}

.item {
  white-space: nowrap;
  background: gray;
  width: 33%;
  border: 1px solid #DBDBDB;
  margin: 0 3% 5% 0;
}

<div class="evenly">
  <div class="item" id="item1">Item One</div>
  <div class="item" id="item2">Item # Two</div>
  <div class="item" id="item3">Item Three</div>
</div>

Answer 1

而不是使用边距设置仅限商品的宽度。这将导致space-between属性正常工作

.item {
  white-space:nowrap;
  background:gray;
  width: 30%;   /* reduced to 30% */
  border: 1px solid #DBDBDB;
  /*margin: 0 3% 5% 0;*/
}

Answer 2

而不是：

.item { margin-right: 3% }

使用

.item + .item { margin-left: 3% }

原始选择器说：所有项目都有正确的边距

修订后的选择器说：只有紧跟在项目后面的项目才能获得左边距。这排除了第一个项目的左边距。

＆＃13;

＆＃13;

#pageArea {
  width: 96%;
  margin: 0px auto;
  padding: 0% 0 0% 0;
}
.evenly {
  display: flex;
  justify-content: space-between;
  border: solid;
}

.item {
  white-space: nowrap;
  background: gray;
  width: 33%;
  border: 1px solid #DBDBDB;
  margin: 0 0 5% 0;
}

.item+.item {
  margin-left: 3%;
}

＆＃13;

<div class="evenly">
  <div class="item" id="item1">Item One</div>
  <div class="item" id="item2">Item # Two</div>
  <div class="item" id="item3">Item Three</div>
</div>

＆＃13;

＆＃13;

＆＃13;

请记住，flexbox中的百分比边距和填充在浏览器中表现不同。 Why doesn't percentage padding work on flex items in Firefox?

Answer 3

＆＃13;

＆＃13;

function mergeSortedArray(a, b) {
    var arr = a.concat(b).sort(function(a, b) {
        return a - b;
     });
    return arr;
 }
 console.log(mergeSortedArray(a, b));

＆＃13;

/* boxes sit in a page area div */
#pageArea {
    width: 96%;
    margin: 0px auto;
    padding: 0% 0 0% 0;
}  

/* flex */
.evenly {
      display:flex;
      justify-content:space-between;
      border:solid;
}

.item {
      white-space:nowrap;
      background:gray;
      width: 32%; /* (100 - 3*2)/3 */
      border: 1px solid #DBDBDB;
      margin: 0 0 5% 0;
}

＆＃13;

＆＃13;

＆＃13;

<div class="evenly"> <div class="item" id="item1">Item One</div> <div class="item" id="item2">Item # Two</div> <div class="item" id="item3">Item Three</div> </div>可以自动计算空间，无需使用边距。