I'm working on a layout where I have three items stacked vertically within a column. My goal is to center the middle item (green) in the column and have the other items positioned around it.
Here's my current setup:
.flex-row {
display: flex;
flex-direction: row;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-start {
display: flex;
justify-content: flex-start;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-end {
display: flex;
justify-content: flex-end;
}
.col {
width: 50px;
min-height: 250px;
margin: 5px;
}
.item {
width: 40px;
height: 40px;
margin: 5px;
}
.long {
height: 60px;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
.yellow {
background: yellow;
}<div class="flex-row">
<div class="red col flex-center">
<div class="flex-col">
<div class="blue item"></div>
<div class="green item"></div>
<div class="yellow item long"></div>
</div>
</div>
<div class="red col flex-center">
<div class="flex-col">
<div class="blue item long"></div>
<div class="green item"></div>
<div class="yellow item"></div>
</div>
</div>
<div class="red col flex-center">
<div class="flex-col">
<div class="blue item long"></div>
<div class="green item"></div>
<div class="yellow item long"></div>
</div>
</div>
</div>My desired outcome:
https://i.stack.imgur.com/l88wR.png
Keep in mind that the center items (green) have fixed height, while the height of the others (blue and yellow) varies based on content length. I could set fixed heights for the columns too, but I'd prefer them to adapt to the height of the items inside.