CSS flex-item align self not working with flex-wrap parent - html

Question

I have a flex parent container set to flex-wrap: wrap and justify-content: flex-end. I have one flex-child, button-group which i want to align to flex-start, but align-self is not working.
.container{
width: 500px;
height: 500px;
background: pink;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.button-group {
background: lightblue;
align-self: flex-start; /* Not working!*/
padding: 5px 10px;
}
.main-box {
width: 450px;
height: 300px;
background: lime;
}
.myfooter {
width: 50%;
height: 10%;
background-color: black;
}
<div class="container">
<div class="button-group">
<button></button>
<button></button>
<button></button>
</div>
<div class="main-box"></div>
<div class="myfooter"> </div>
</div>
How can I get the button group to align itself to the left while preserving the flex wrap?

Answer 1

Flexbox aligns items in 1D direction. Thats why the flex-start didnt work,
In oreder to make it work wrap it with a div and add appropriate styles as shown in the snippet
.container {
width: 500px;
height: 500px;
background: pink;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.button-group {
background: lightblue;
padding: 5px 10px;
display: inline-block;
}
.main-box {
width: 450px;
height: 300px;
background: lime;
}
.myfooter {
width: 50%;
height: 10%;
background-color: black;
}
.holder{width: 100%;}
<div class="container">
<div class="holder">
<div class="button-group">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
<div class="main-box"></div>
<div class="myfooter"> </div>
</div>

Answer 2

If you don't need margin to the right side of button-group, you can simply use .margin-right:auto; on .button-group to make it align itself to the left.
.container{
width: 500px;
height: 500px;
background: pink;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.button-wrap {
display: flex;
flex-basis: 100%;
}
.button-group {
background: lightblue;
align-self: flex-start;
padding: 5px 10px;
margin-right: auto;
}
.main-box {
width: 450px;
height: 300px;
background: lime;
}
.myfooter {
width: 50%;
height: 10%;
background-color: black;
}
<div class="container">
<div class="button-wrap">
<div class="button-group">
<button></button>
<button></button>
<button></button>
</div>
</div>
<div class="main-box"></div>
<div class="myfooter"> </div>
</div>

Answer 3

Try this. You need to use a additional wrapper for button group and apply display: flex; flex-basis: 100%; for that wrapper.
https://jsfiddle.net/Sampath_Madhuranga/7ad2u804/
.container{
width: 500px;
height: 500px;
background: pink;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.button-wrap {
display: flex;
flex-basis: 100%;
}
.button-group {
background: lightblue;
align-self: flex-start; /* Not working!*/
padding: 5px 10px;
}
.main-box {
width: 450px;
height: 300px;
background: lime;
}
.myfooter {
width: 50%;
height: 10%;
background-color: black;
}
<div class="container">
<div class="button-wrap">
<div class="button-group">
<button></button>
<button></button>
<button></button>
</div>
</div>
<div class="main-box"></div>
<div class="myfooter"> </div>
</div>

Answer 4

Here what happened, the flex-direction default is row, so your child elements is placed horizontally, but because the container width is static and it cant expand to wrap all of your child elements, it push them down, that cause your layout may look vertically but it is still placed horizontally. And in that case (flex-direction: row) the align-self property only set the flex items in the vertical direction.
How to fix it, first, you need to apply flex-direction: column. Then you can set the align-self for your flex-items and now and it will align self horizontally
.container{
width: 500px;
height: 500px;
background: pink;
flex-direction: column;
display: flex;
flex-wrap: wrap;
}
.button-group {
background: lightblue;
align-self: flex-start; /*working now!*/
padding: 5px 10px;
}
.main-box {
width: 450px;
height: 300px;
background: lime;
align-self: flex-end;
}
.myfooter {
width: 50%;
height: 10%;
background-color: black;
align-self: flex-end;
}
<div class="container">
<div class="button-group">
<button></button>
<button></button>
<button></button>
</div>
<div class="main-box"></div>
<div class="myfooter"> </div>
</div>