html - 如何消除 Flexbox 中额外的容器间距？

Question

我是 Flexbox 新手，但在 W3 页面上找不到任何解释如何消除额外容器间距的内容。

例如，以他们的一个例子为例，我不确定如何能够基本上得到与左、中、右浮动相同的东西，并摆脱所有显示的灰色区域在容器中。

如果我只想显示子元素而不显示容器的背景怎么办？

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: auto;
    height: auto;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: auto;
    height: auto;
    margin: 0px;
    border: 1px solid black;
}

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

Answer 1

要将元素向左、居中和向右定位，一个简单的方法是使用 justify-content 属性:

.flex-container {
    display: flex;
    justify-content: space-between; /* NEW */
    background-color: lightgrey;
}

.flex-item {
    border: 1px solid black;
    background-color: cornflowerblue;
}

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

要使元素占用所有容器空间，请在元素上使用 flex: 1:

.flex-container {
    display: flex;
    background-color: lightgrey;
}

.flex-item {
    flex: 1; /* NEW */
    border: 1px solid black;
    background-color: cornflowerblue;
}

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>