css краткая Flexbox: способ выравнивания отдельных элементов вдоль главной оси




flex-wrap (2)

Вы можете использовать набор flex-grow: 1 для flex-grow: 1 и упорядочить его так, чтобы он заполнил пространство, которое вы хотите между элементами.

.flex {
  display: flex;
  height: 100px;
  counter-reset: counter;
}
.flex:before {
  content: '';
  flex: 1 1 auto;
  order: 1;
}
.flex div {
  flex: 0 1 100px;
  background-color: blue;
  margin: 0 1%;
}
.flex div:before {
  counter-increment: counter;
  content: counter(counter);
  color: white;
  line-height: 100px;
  text-align: center;
  display: block;
  font-size: 48px;
  font-family: sans-serif;
}
.flex div:last-child {
  order: 2;
  flex-basis: 50px;
}
<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Мне было интересно, есть ли способ переопределить выравнивание вдоль основной оси для отдельного элемента. Что-то вроде этого:

На приведенном выше рисунке все элементы имеют элементы align-items: flex-start , за исключением последнего, который должен быть выровнен как flex-end или space-around .

Существует опция переопределения вдоль поперечной оси: align-self , но, вероятно, не вдоль основной оси.

Что плохо, делая это с position: absolute : другие элементы должны уважать это особое, а не перекрываться с ним.

Что плохо с float это то, что он работает для flex-direction: row только flex-direction: row .


Answer #1

Просто установите margin-left для «auto» для 4-го элемента. При выравнивании элементов вдоль главной оси автоматически применяются автоматические поля.





flexbox