Подравняне на флекс елементи по главната ос в CSS
Свойството justify-content позволява
подравняване на елементите по главната ос. По-рано
вече сте се запознали със стойностите center,
space-between, space-around,
space-evenly. Нека сега научим
още няколко стойности.
Стойността flex-start притиска елементите към началото
на главната ос, а стойността flex-end - към края.
Нека ги видим с примери.
Пример
Нека насочим главната ос отляво надясно, като зададем
на свойството flex-direction стойност row.
Нека притиснем блоковете към началото на оста. За това justify-content
ще зададем стойност flex-start:
.parent {
display: flex;
flex-direction: row; /* главната ос отляво надясно */
justify-content: flex-start; /* блоковете към началото на главната ос */
}
Резултат от изпълнението на кода:
Пример
Нека сега притиснем блоковете към края на оста.
За това justify-content ще зададем
стойност flex-end:
.parent {
display: flex;
flex-direction: row; /* главната ос отляво надясно */
justify-content: flex-end; /* блоковете към края на главната ос */
}
Резултат от изпълнението на кода:
Пример
Нека сега насочим главната ос отдясно наляво,
като зададем на свойството flex-direction стойност
row-reverse. Нека притиснем блоковете към началото
на оста, тоест към десния край. За това justify-content
ще зададем стойност flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* главната ос отдясно наляво */
justify-content: flex-start; /* блоковете към началото на главната ос */
}
Резултат от изпълнението на кода:
Пример
А сега нека притиснем блоковете към края на главната
ос, тоест към левия край. За това justify-content
ще зададем стойност flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* главната ос отдясно наляво */
justify-content: flex-end; /* блоковете към края на главната ос */
}
Резултат от изпълнението на кода:
Пример
В предишните примери главната ос беше насочена хоризонтално. Нека сега я обърнем и я насочим вертикално.
Нека насочим главната ос надолу, като зададем
на свойството flex-direction стойност
column.
Нека притиснем блоковете към началото на главната ос, тоест
към горния край. За това justify-content
ще зададем стойност flex-start:
.parent {
display: flex;
flex-direction: column; /* главната ос отгоре надолу */
justify-content: flex-start; /* блоковете към началото на главната ос */
}
Резултат от изпълнението на кода:
Пример
Нека сега притиснем блоковете към края на главната
ос, тоест към долния край. За това justify-content
ще зададем стойност flex-end:
.parent {
display: flex;
flex-direction: column; /* главната ос отгоре надолу */
justify-content: flex-end; /* блоковете към края на главната ос */
}
Резултат от изпълнението на кода:
Пример
Нека обърнем главната ос, като я насочим отдолу
нагоре. За това на свойството flex-direction
ще зададем стойност column-reverse. В
този случай блоковете ще сменят реда си -
в началото на оста ще стои последният в HTML
кода блок.
Нека притиснем блоковете към началото на главната ос,
тоест към долния край. За това justify-content
ще зададем стойност flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* главната ос отдолу нагоре */
justify-content: flex-start; /* блоковете към началото на главната ос */
}
Резултат от изпълнението на кода:
Пример
Нека притиснем блоковете към края на главната ос,
тоест към горния край. За това justify-content
ще зададем стойност flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* главната ос отдолу нагоре */
justify-content: flex-end; /* блоковете към края на главната ос */
}
Резултат от изпълнението на кода:
