Moving div to the right inside flexbox while keeping space-around width - html

Question

So I am trying to move a div to the right inside flexbox.
I dont want to change justify-content to anything else, but I am trying to move the middle div to the right. However if I use margin and move it then the space around the whole parent div is also affected. Is it possible to move the middle div to the right without affecting the space of the whole div?
So far this solution kind of works- but the items will overlay on each other on smaller screen so this is not responsive at all:
.item2 {
margin-left: 100px;
margin-right: -100px;
border: 1px solid red;
}
But it doesnt seem very elegant. Is there a way to do it with flexbox only?
.main {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.item1 {
border: 1px solid red;
}
.item2 {
margin-left: 100px;
margin-right: -100px;
border: 1px solid red;
}
<div class="main">
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item1">
Item 3
</div>
</div>

Answer 1

CSS transform can alter the positioning of an element but it doesn't affect surrounding elements.
This snippet removes the margin settings and instead uses transform: translateX(100px).
.main {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.item1 {
border: 1px solid red;
}
.item2 {
/*margin-left: 100px;
margin-right: -100px;
*/
transform: translateX(100px);
border: 1px solid red;
}
<div class="main">
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item1">
Item 3
</div>
</div>

Answer 2

I think you could utilize the order property here
.main {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.item1 {
border: 1px solid red;
}
.item2 {
order: 3;
border: 1px solid red;
}
<div class="main">
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item1">
Item 3
</div>
</div>

Answer 3

You can do it in several ways:
1)
transform: translateX(100px)
2)
position: relative;
left: 100px;
3) if you want to change order of flex-items, use this:
.flex-item-2{
order: 1
}
It moves second item to third. Because default order value: 0.
Maybe there are other useful ways you can use!

Answer 4

.main {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item1 {
border: 1px solid red;
}
.rightSide{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.item2 {
border: 1px solid red;
}
<div class="main">
<div class="item1 leftSide">
Item 1
</div>
<div class="rightSide">
<div class="item2">
Item 2
</div>
<div class="item1">
Item 3
</div>
</div>
</div>

Answer 5

.main {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.parent {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.p-1{
flex-grow: 2;
}
.p-2{
flex-grow: 1;
}
.item1 {
border: 1px solid red;
}
.item2 {
border: 1px solid red;
}
.item3 {
border: 1px solid red;
}
<div class="main">
<div class="parent p-1">
<div class="item1">
Item 1
</div>
</div>
<div class="parent p-2">
<div class="item2">
Item 2
</div>
<div class="item3">
Item 3
</div>
</div>
</div>