Как выровнять гибкие элементы тремя различными способами?

Question

Итак, я хочу выровнять элементы внутри флекс-бокса, как на картинке выше.

У меня есть HTML следующим образом:

<div class="flex-row">
  <div class="flex-item">
    <img src="/default.png">
  </div>
  <div class="flex-item">
    <img src="/default.png">
  </div>
  <div class="flex-item">
    <img src="/default.png">
  </div>
</div>

css as

   .flex-row {
      min-height: 400px;
      display: flex;
      align-items: flex-start;
   }

   .flex-item:nth-child(2) {
     align-items: center;
   }

   .flex-item:last-child {
      align-items: flex-end;
   }

Answer 1

Использование align-self не align-items

.flex-row {
  min-height: 300px;
  display: flex;
  width: 90%;
  margin: 1em auto;
  border: 1px solid red;
  justify-content: space-between;
}

.flex-item {
  height: 50px;
  background: lightblue;
  width: 100px;
}

.flex-item:nth-child(2) {
  align-self: center;
}

.flex-item:last-child {
  align-self: flex-end;
}

<div class="container flex-row">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Answer 2

Посмотрите на этот код

display:flex;
flex-direction: row;
justify-content: flex-start; 
align-items: centre;

С помощью flex-direction вы указываете выравнивание по главному принципу (горизонтальное с row, вертикальное с column).В зависимости от того, что вы выберете здесь, следующие свойства будут иметь различный эффект.

Затем с помощью justify-content вы указываете, как ваши элементы внутри ваших элементов должны выравниваться по главной оси, которую вы только что определили (вертикальный или горизонтальный).В этом случае flex-start означает в начале моей оси.

И с помощью align-items вы указываете выравнивание для вторичного топора . Вертикальное, потому что мы выбираем flex-direction: row; ине flex-direction: column;.Поэтому по вертикальной оси элементы будут выровнены по centre

, и не забудьте взглянуть на доступные свойства, такие как space-between или flex-end

Answer 3

Как так?Вам нужно flex-wrap: wrap; Для того чтобы обернуть предметы нужно быть достаточно широкими (100%).Поскольку 100% гибкий элемент всегда выровнен по всей ширине, вам нужно text-align, а не align-items, что в первую очередь является неправильным свойством.

align-items - это выравнивание по оси креста,не главная ось, которая была бы justify-content

.flex-row {
  min-height: 400px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.flex-item {
  flex-basis: 100%;
}
.flex-item:nth-child(2) {
  text-align: center;
}

.flex-item:last-child {
  text-align: right;
}

<div class="flex-row">
  <div class="flex-item">
    <img src="/default.png" width="100" height="50">
  </div>
  <div class="flex-item">
    <img src="/default.png" width="100" height="50">
  </div>
  <div class="flex-item">
    <img src="/default.png" width="100" height="50">
  </div>
</div>

Answer 4

ВНИМАНИЕ!

чтобы установить высоту для столбца, измените px здесь: flex: 0 1 50px; или удалите его!

1. Использование margin-right/left:auto как:

   .flex-row {
     min-height: 400px;
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
   }
   
   .flex-item {
     flex: 0 1 50px;
   
   }
   
   .flex-item:nth-child(2) {
     margin-right: auto;
     margin-left: auto;
   }
   .flex-item:last-child {
     margin-left: auto;
   }

   <div class="flex-row">
     <div class="flex-item">
       <img src="/default.png">
     </div>
     <div class="flex-item">
       <img src="/default.png">
     </div>
     <div class="flex-item">
       <img src="/default.png">
     </div>
   </div>

2. используя align-self

.flex-row {
  min-height: 400px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.flex-item {
  flex: 0 1 50px;
  align-self: flex-start;
}

.flex-item:nth-child(2) {
  align-self: center;
}

.flex-item:last-child {
  align-self: flex-end;
}

<div class="flex-row">
  <div class="flex-item">
    <img src="/default.png">
  </div>
  <div class="flex-item">
    <img src="/default.png">
  </div>
  <div class="flex-item">
    <img src="/default.png">
  </div>
</div>