Question

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

例如，举一个他们的例子，我不知道我怎么能够基本上得到与左，中，右浮动相同的东西，并摆脱所有那个灰色区域显示在容器中。

如果我只想展示孩子而不是容器的背景怎么办？

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何摆脱flexbox中额外的容器间距？

1 个答案: