Flexbox row center one item and not the other [duplicate] - html

Question

This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Horizontally center an element and put another element to the right of it
(1 answer)
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
I am trying to center one item with flexbox, the one in blue. And the item in red should not be centered but simply be aligned to the right of the blue item.
How to do this?
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.box.right-item {
background: red;
width: 200px;
}
.box.left {
background: blue;
width: 200px;
height: 20px;
}
<div class="container">
<div class="box left">
xx
</div>
<div class="box right-item">
yy
</div>
</div>

Answer 1

Just use margin-left: calc(50% - 100px); for .box.left This centers the blue box.
.container {
display: flex;
flex-direction: row;
align-items: center;
}
.box.right-item {
background: red;
width: 200px;
}
.box.left {
background: blue;
width: 200px;
height: 20px;
margin-left: calc(50% - 100px);
/* ↑ half of the width */
}
<div class="container">
<div class="box left">
xx
</div>
<div class="box right-item">
yy
</div>
</div>

Answer 2

This is a little bit tricky to do but you could do a few workarounds like make the second box's position absolute so that it's really just the blue box being centered - or what I think would be a simpler elegant solution - just give the blue box a left margin the size of the red box -
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.box.right-item {
background: red;
width: 200px;
}
.box.left {
background: blue;
width: 200px;
height: 20px;
margin-left:200px;
}
<div class="container">
<div class="box left">
xx
</div>
<div class="box right-item">
yy
</div>
</div>

Answer 3

If you want to center the blue item while keeping justify-content: center, you'll need to shift the center point by positioning both items 100px to the right of their original position, which translates to adding position: relative; left: 100px; to both item. Or, you could try using margin-left.
There's no direct way to center 1 item and at the same time push the other to the end. You could do it with grid, but for flex, above will work.
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.box.right-item {
background: red;
width: 200px;
position: relative;
left: 100px;
}
.box.left {
background: blue;
width: 200px;
height: 20px;
position: relative;
left: 100px;
}
<div class="container">
<div class="box left">
xx
</div>
<div class="box right-item">
yy
</div>
</div>

Answer 4

Although your question is not quite clear, here is what I make from your question -
If you are trying to center things inside your blue-box on left, you will have to add display properties for that container too. Here I am using flexbox as you might be familiar with it.
the modified class will be like this -
.box.left {
background: blue;
width: 200px;
display: flex;
justify-content: center;
}
You don't need to add flex-direction as it is by default row.
You can run the following snippet below to check out
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.box.right-item {
background: red;
width: 200px;
}
.box.left {
background: blue;
width: 200px;
display: flex;
justify-content: center;
}
<div class="container">
<div class="box left">
xx
</div>
<div class="box right-item">
yy
</div>
</div>