如何在flex容器中居中对齐div的网格? [英] How to center align a grid of divs in a flex container?
问题描述
我试图将放置在 flex-container中的3列网格(由6
flex-item
div
。 (参考附加的图片)
我累了许多变体 float
和 align-content
。我也试图把flex项目放在一个子容器,但不能使它的工作。
这是我目前拥有的:
.flex-container {flex-direction:row;显示:-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;}。color-1 {background-color:#8c72cb;}。color-2 {background-color:#54c7ec;} color-3 {background-color:#a3cedf;}。colour- 4 {background-color:#b9cad2;}。color-5 {background-color:#6bcebb;} color-6 {background-color:#a3ce71;}
< div class =flex-container> < div class =flex-item color-1>< / div> < div class =flex-item color-2>< / div> < div class =flex-item color-3>< / div> < div class =flex-item color-4>< / div> < div class =flex-item color-5>< / div> < div class =flex-item color-6>< / div>< / div>
谢谢。
您可以在flex容器上使用 justify-content
项目在其主轴。请查看此示例: https://jsfiddle.net/eL650y3e/
资料来源:
- https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
- https:// css-tricks。 com / snippets / css / a-guide-to-flexbox /
I am trying to centre align the 3 column grid (which is made up of 6 flex- item
s) placed in a flex-container
div
. (Refer to image attached)
I tired many variations of float
and align-content
. I also tried to place the flex items in a sub container but couldn't make it work.
This is what I currently have:
.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>
Thanks.
You can use justify-content
on the flex container to align items over its main axis. Take a look at this example: https://jsfiddle.net/eL650y3e/
Sources:
- https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这篇关于如何在flex容器中居中对齐div的网格?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!