设置可变项目间距
我有三个flex元素，在一个容器中，它们对齐到中心。如何在项目之间留出一定的间距？例如:第一个应该是容器左边的shoen，第二个应该在中间，第三个应该在右边。这是一个难题：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;
}/* end hero下载*/
<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 -->回答 3
Stack Overflow用户
发布于 2015-09-24 23:21:11
您需要使用justify-content: space-between而不是justify-content: center，因为后者将使项目整体居中对齐。
space-between允许在flex子级之间保持相等的边距。如果除了flex子级之间的相等边距之外，还需要在容器中使用相等的填充/边距，也可以使用space-around。
修改后的输出：
/* 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 */<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 -->
Stack Overflow用户
发布于 2015-09-24 23:58:39
因为您已经在android、ios和windows div中使用了id，所以必须在CSS文件中使用#android、#ios和#windows，而不是使用.android、.ios和.windows。
Stack Overflow用户
发布于 2015-09-25 00:03:48
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">，因为下载按钮和图像div一起顺序出现在女英雄下载div中，所有的按钮和图像div的间距是相等的，但从视觉上看，由于按钮div是空的，所以效果看起来不居中。
将内容添加到按钮div中，或者将jQuery单击事件侦听器添加到图像div中，这样就不再需要按钮了。
https://stackoverflow.com/questions/32765102
复制相似问题
腾讯云开发者
