Question

我有一个容器中的三个柔性元件，它们与中心对齐。如何在物品之间留出一些间距？例如：第一个应该是容器的左侧，第二个是中心，第三个是右侧。这是一个小提琴： https://jsfiddle.net/usernamenn/y1L6k5ap/ 这是代码：

.herodownload {
    width: 100%;
    background-color: #f2f2f2;
    margin-top: 90px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.android {
    flex-grow: 1;
}

.ios {
    flex-grow: 1;
}

.windows {
    flex-grow: 1;
}

/ *结束英雄下载* /

<div class="herodownload"> <!-- hero download -->
        <div id="android"><img src="images/vignetta.png"></div>
        <div id="ios"><img src="images/vignetta.png"></div>
        <div id="windows"><img src="images/vignetta.png"></div>
            <div class="downlad_buttons">
                <div id=""></div>
                <div id=""></div>
                <div id=""></div>
            </div>
    </div>  
     <!-- end main site content -->

Answer 1

您需要使用justify-content: space-between代替justify-content: center，因为后者会将项目与整个中心对齐。

space-between允许flex子节点之间的边距相等。如果在容器内需要相等的填充/边距以及弹性子节点之间的相等边距，您也可以使用space-around。

修改后的输出：

＆＃13;

/* homepage heading and paragraph style */

.hero_description {
  color: #333;
  text-align: center;
  margin-top: -60px;
  overflow: hidden;
  z-index: -100;
}
#hero_heading {
  font-size: 6em;
}
#hero_paragraph {
  font-size: 2.3em;
  margin-top: -55px;
}
/* end homepage heading and paragraph*/

/* hero download */

.herodownload {
  width: 100%;
  background-color: #f2f2f2;
  margin-top: 90px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between; /* Modified */
}
.android {
  flex-grow: 1;
}
.ios {
  flex-grow: 1;
}
.windows {
  flex-grow: 1;
}
/* end hero download */

＆＃13;

<div class="herodownload">
  <!-- hero download -->
  <div id="android">
    <img src="images/vignetta.png">
  </div>
  <div id="ios">
    <img src="images/vignetta.png">
  </div>
  <div id="windows">
    <img src="images/vignetta.png">
  </div>
  <div class="downlad_buttons">
    <div id=""></div>
    <div id=""></div>
    <div id=""></div>
  </div>
</div>
<!-- end main site content -->

＆＃13;

Answer 2

因为你已经使用id用于android，ios和windows div，所以你必须在CSS文件中使用#android，#ios和#windows而不是使用.android，.ios和.windows。

Answer 3

良好的flex资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://jsfiddle.net/pbunsee/ce6jrLdg/

我使用了以下内容：

    justify-content: space-around;
    align-items: center;

要获得结果虽然我注释了按钮div <div class="downlad_buttons"> 由于下载按钮与herodownload div中的图像div一起顺序显示，因此所有按钮和图像div的间距彼此相等，但由于空按钮div，视觉效果看起来不会居中。

将内容添加到按钮div中要么将jQuery on-click事件监听器添加到图像div，以便不再需要按钮。

设置弹性项间距

3 个答案: