Center A Group Of Wrapped Flex Items
I'm trying to center a group of wrapped flex items. The HTML looks like this: DEMO The above looks like this: The green boxes are wrapped correctly, but they, as a whole, are not
Solution 1:
Not sure what kind of centering you want do
So a few options:
Option 1: just center the elements in .container
- add
justify-content: center;
to.container
instead
main {
background-color: blue;
width: 390px;
display: flex;
}
.container {
background-color: red;
display: flex;
flex-wrap: wrap;
justify-content:center;
}
.a1 {
color: grey;
width: 100px;
height: 200px;
background-color: green;
border: 1px solid black;
}
<main><divclass="container"><divclass="a1"></div><divclass="a1"></div><divclass="a1"></div><divclass="a1"></div></div></main>
Option 2: center the .container
- add some
width
+margin:auto
to.container
main {
background-color: blue;
width: 390px;
display: flex;
justify-content: center;
}
.container {
background-color: red;
display: inline-flex;
flex-wrap: wrap;
width: 300px;
margin: auto;
}
.a1 {
color: grey;
width: 100px;
height: 200px;
background-color: green;
border: 1px solid black;
box-sizing: border-box
}
<main><divclass="container"><divclass="a1"></div><divclass="a1"></div><divclass="a1"></div><divclass="a1"></div></div></main>
Option 3: center both from above options
main {
background-color: blue;
width: 390px;
display: flex;
}
.container {
background-color: red;
display: inline-flex;
flex-wrap: wrap;
width: 90%;
margin: auto;
justify-content: center;
}
.a1 {
color: grey;
width: 100px;
height: 200px;
background-color: green;
border: 1px solid black;
}
<main><divclass="container"><divclass="a1"></div><divclass="a1"></div><divclass="a1"></div><divclass="a1"></div></div></main>
Solution 2:
If you just want to center the container give a fixed width to the container or make sure that the width of the container has the expected width.
main {
background-color: blue;
width: 390px;
display: flex;
justify-content: center;
}
.container {
background-color: red;
display: inline-flex;
flex-wrap: wrap;
width:306px;
}
.a1 {
color: grey;
width: 100px;
height: 200px;
background-color: green;
border: 1px solid black;
}
<main><divclass="container"><divclass="a1"></div><divclass="a1"></div><divclass="a1"></div><divclass="a1"></div></div></main>
Post a Comment for "Center A Group Of Wrapped Flex Items"