To change the alignment of the flex items within a container, you can modify the value of align-items from stretch to flex-end. This adjustment may meet your requirements.
div.flexbox {
display: flex;
align-items: flex-end; /* updated */
justify-content: space-between;
flex-flow: row wrap;
border: 1px solid black;
min-height: 100px;
padding: 5px;
}
.item-1, .item-2 {
padding: 10px;
border: 1px dashed red;
}
.item-1 {
width: 30%;
position: relative;
}
.item-2 {
width: 60%;
}
<div class="flexbox">
<div class="item-1">
<span>I want to be aligned at the bottom of item-1</span>
</div>
<div class="item-2">
<span>I want to be aligned at the bottom of item-2</span>
</div>
</div>
If your primary question is:
Is there a method to adjust the vertical alignment of the flex items so that their children are aligned at the bottom?
... then converting the flex items into nested flex containers and using flex properties to vertically align the content could be the solution:
div.flexbox {
display: flex;
align-items: stretch;
justify-content: space-between;
flex-flow: row wrap;
border: 1px solid black;
min-height: 100px;
padding: 5px;
}
.item-1, .item-2 {
display: flex; /* new addition */
align-items: flex-end; /* new addition */
padding: 10px;
border: 1px dashed red;
}
.item-1 {
width: 30%;
position: relative;
}
.item-2 {
width: 60%;
}
<div class="flexbox">
<div class="item-1">
<span>I want to be aligned at the bottom of item-1</span>
</div>
<div class="item-2">
<span>I want to be aligned at the bottom of item-2</span>
</div>
</div>