I have set up a flexbox with two items which should be on the left and right on a normal screen.
If the screen is not big enough to show both next to each other, it should wrap but then they should be centered and not aligned on the left.
I tried different solutions (like using margin: auto
on the child items) but that aligned them more to the center even when in the same row.
Here is a simplified example:
.container {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
justify-content: space-between;
border: 1px solid black;
margin-bottom: 25px;
}
.large {
width: 500px;
}
.small {
width: 175px;
}
.item {
width: 100px;
height: 100px;
background-color: blue;
margin: 25px 0px;
}
<div class="container large">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container small">
<div class="item"></div>
<div class="item"></div>
</div>
See Question&Answers more detail:os