CSS flex-item выровнять self не работает с flex-wrap parent

Question

У меня есть гибкий родительский контейнер, установленный на flex-wrap: wrap и justify-content: flex-end.У меня есть один flex-child, button-group, который я хочу выровнять по flex-start, но align-self не работает.

.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>

Как заставить группу кнопок выравниваться по левому краю при сохранении гибкой обертки?

Answer 1

Вот что произошло, значение по умолчанию для flex-direction - это строка, поэтому ваши дочерние элементы расположены горизонтально, но поскольку ширина контейнера является статической, и она не может расширяться, чтобы обернуть все ваши дочерние элементы, она толкает их вниз, что приводит кмакет может выглядеть вертикально, но он по-прежнему расположен горизонтально.И в этом случае (flex-direction: row) свойство align-self только устанавливает элементы flex в вертикальном направлении.

Как это исправить, во-первых, вам нужно применить flex-direction: column.Тогда вы можете установить align-self для ваших flex-элементов, и теперь он будет выравнивать себя по горизонтали

.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>

Answer 2

Flexbox выравнивает элементы в 1D направлении.Вот почему flex-start не работает,

В oreder, чтобы заставить его работать, оберните его div и добавьте соответствующие стили, как показано во фрагменте

.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 3

Если вам не нужно поле справа от группы кнопок, вы можете просто использовать .margin-right:auto; на .button-group, чтобы выровнять его по левому краю.

.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 4

Попробуйте это.Вам нужно использовать дополнительную оболочку для группы кнопок и применить display: flex; flex-basis: 100%; для этой оболочки.

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>