I have some html div's and simple css style, something like this:
.wrap{
display: flex;
flex-direction:row;
justify-content: space-around;
align-items: center;
}
.child{
width: 45px;
height: 45px;
border-radius: 50%;
background-color: lightBlue;
display:flex;
justify-content: center;
align-items: center;
font-size: 20px;
}<div class='wrap'>
<div class='child'>
0
</div>
<div class='child'>
1
</div>
<div class='child'>
2
</div>
<div class='child'>
3
</div>
<div class='child'>
4
</div>
<div class='child'>
5
</div>
<div class='child'>
6
</div>
<div class='child'>
7
</div>
<div class='child'>
8
</div>
<div class='child'>
9
</div>
<div class='child'>
10
</div>
</div>I would like to change position of this element on mobile device to something like this:
How can I do this? I was thinking first of all about flex-wrap and order?
You can do it like below:
.wrap {
display: flex;
flex-direction: row;
flex-wrap:wrap; /* enable the wrap*/
justify-content:center; /* center everything */
}
/* create a hidden element taking full width
used to seperate our elements
*/
.wrap:before {
content:"";
flex-basis:100%;
order:1
}
/* put all even elements after the seperation to have a new row*/
.child:nth-child(even) {
order:2;
}
.child {
width: 45px;
height: 45px;
margin:5px;
border-radius: 50%;
background-color: lightBlue;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}<div class='wrap'>
<div class='child'>
0
</div>
<div class='child'>
1
</div>
<div class='child'>
2
</div>
<div class='child'>
3
</div>
<div class='child'>
4
</div>
<div class='child'>
5
</div>
<div class='child'>
6
</div>
<div class='child'>
7
</div>
<div class='child'>
8
</div>
<div class='child'>
9
</div>
<div class='child'>
10
</div>
</div>display: flex from .wrap and give .child display: inline-flexCSS will be like that_
.wrap{
text-align: center;
}
.child{
width: 45px;
height: 45px;
border-radius: 50%;
background-color: lightBlue;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 20px;
}