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

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?

score 2 · Accepted Answer · answered Aug 27 '18 at 07:42

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>

Thanks for your answer. When you say flexbox aligns items in 1D direction, I'm confused because the flex-direction is still row, so I would think align self should still work — killer_manatee, Aug 27 '18 at 07:53
@killer_manatee refer [How does flex-wrap work with align-self, align-items and align-content?](https://stackoverflow.com/questions/42613359/how-does-flex-wrap-work-with-align-self-align-items-and-align-content) for more info — Gautam Naik, Aug 27 '18 at 08:42

score 2 · Answer 2 · answered Aug 27 '18 at 07:44

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>

score 1 · Answer 3 · answered Aug 27 '18 at 07:35

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>

@killer_manatee, let me know if you need ant additional help. Thanks. — VSM, Aug 27 '18 at 07:37

Ethan Vu · Answer 4 · 2018-08-27T08:01:20.297

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>

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

4 Answers4