我正在尝试居中对齐flex- item
放置在中的3列网格(由6 s组成)flex-container
div
。(请参阅附件中的图像)
我已经厌倦了float
和的许多变化align-content
。我还尝试将flex项放在子容器中,但无法使其工作。
这是我目前拥有的:
.flex-container {
flex-direction: row;
display: -webkit-flex;
display: inline-flex;
background-color: #f5f7f9;
width: 100%;
align-content: center;
flex-flow: row wrap;
margin-top: 100px;
}
.flex-item {
width: 23%;
height: 360px;
margin: 10px;
order: 1;
border-radius: 3px;
padding: 0 10px 40px 10px;
}
.colour-1 {
background-color: #8c72cb;
}
.colour-2 {
background-color: #54c7ec;
}
.colour-3 {
background-color: #a3cedf;
}
.colour-4 {
background-color: #b9cad2;
}
.colour-5 {
background-color: #6bcebb;
}
.colour-6 {
background-color: #a3ce71;
}
<div class="flex-container">
<div class="flex-item colour-1"></div>
<div class="flex-item colour-2"></div>
<div class="flex-item colour-3"></div>
<div class="flex-item colour-4"></div>
<div class="flex-item colour-5"></div>
<div class="flex-item colour-6"></div>
</div>
谢谢。
您可以justify-content
在flex容器上使用,以使项目在其主轴上对齐。看一下这个例子:https : //jsfiddle.net/eL650y3e/
资料来源:
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句