Is there a way to center a specific div within a flex container? Let me explain using some code:
Take a look at this code snippet:
<html>
<head>
<style>
div.flex_container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
align-content: stretch;
}
div.red_box {
background-color: red;
width: 100px;
height: 100px;
}
div.blue_box {
background-color: blue;
width: 100px;
height: 100px;
}
div.yellow_box {
background-color: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="flex_container">
<div class="red_box"></div>
<div class="blue_box"></div>
<div class="yellow_box"></div>
</div>
</body>
</html>
You can also view the code on JSFiddle.
Currently, the Blue Box is centered, but I would like the Red Box to be centered instead, with the other boxes to the right of it.
Is there a way to achieve this and keep the same order of elements?
Thank you for your help!