Подравняне на флекс елементи по главната ос в CSS

Свойството justify-content позволява подравняване на елементите по главната ос. По-рано вече сте се запознали със стойностите center, space-between, space-around, space-evenly. Нека сега научим още няколко стойности.

Стойността flex-start притиска елементите към началото на главната ос, а стойността flex-end - към края. Нека ги видим с примери.

Пример

Нека насочим главната ос отляво надясно, като зададем на свойството flex-direction стойност row. Нека притиснем блоковете към началото на оста. За това justify-content ще зададем стойност flex-start:

css.parent {
  display: flex;
  flex-direction: row; /* главната ос отляво надясно */
  justify-content: flex-start; /* блоковете към началото на главната ос */
}

Резултат от изпълнението на кода:

Пример

Нека сега притиснем блоковете към края на оста. За това justify-content ще зададем стойност flex-end:

css.parent {
  display: flex;
  flex-direction: row; /* главната ос отляво надясно */
  justify-content: flex-end; /* блоковете към края на главната ос */
}

Резултат от изпълнението на кода:

Пример

Нека сега насочим главната ос отдясно наляво, като зададем на свойството flex-direction стойност row-reverse. Нека притиснем блоковете към началото на оста, тоест към десния край. За това justify-content ще зададем стойност flex-start:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* главната ос отдясно наляво */
  justify-content: flex-start; /* блоковете към началото на главната ос */
}

Резултат от изпълнението на кода:

Пример

А сега нека притиснем блоковете към края на главната ос, тоест към левия край. За това justify-content ще зададем стойност flex-end:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* главната ос отдясно наляво */
  justify-content: flex-end; /* блоковете към края на главната ос */
}

Резултат от изпълнението на кода:

Пример

В предишните примери главната ос беше насочена хоризонтално. Нека сега я обърнем и я насочим вертикално.

Нека насочим главната ос надолу, като зададем на свойството flex-direction стойност column.

Нека притиснем блоковете към началото на главната ос, тоест към горния край. За това justify-content ще зададем стойност flex-start:

css.parent {
  display: flex;
  flex-direction: column; /* главната ос отгоре надолу */
  justify-content: flex-start; /* блоковете към началото на главната ос */
}

Резултат от изпълнението на кода:

Пример

Нека сега притиснем блоковете към края на главната ос, тоест към долния край. За това justify-content ще зададем стойност flex-end:

css.parent {
  display: flex;
  flex-direction: column; /* главната ос отгоре надолу */
  justify-content: flex-end; /* блоковете към края на главната ос */
}

Резултат от изпълнението на кода:

Пример

Нека обърнем главната ос, като я насочим отдолу нагоре. За това на свойството flex-direction ще зададем стойност column-reverse. В този случай блоковете ще сменят реда си - в началото на оста ще стои последният в HTML кода блок.

Нека притиснем блоковете към началото на главната ос, тоест към долния край. За това justify-content ще зададем стойност flex-start:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* главната ос отдолу нагоре */
  justify-content: flex-start; /* блоковете към началото на главната ос */
}

Резултат от изпълнението на кода:

Пример

Нека притиснем блоковете към края на главната ос, тоест към горния край. За това justify-content ще зададем стойност flex-end:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* главната ос отдолу нагоре */
  justify-content: flex-end; /* блоковете към края на главната ос */
}

Резултат от изпълнението на кода:

Практически задачи