0
Разница между Justify-Content и Align-Items в CSS
В CSS функция “justify-content” выравнивает элементы по главной оси (обычно горизонтальной), контролируя распределение пространства внутри контейнера. В отличие от этого, функция “align-items” выравнивает элементы по поперечной оси (обычно вертикальной), управляя размещением элементов относительно друг друга в контейнере. И то, и другое является ключевым для размещения элементов в макетах Flexbox и Grid.
CSS Justify-Content
CSS-свойство justify-content выравнивает элементы гибкого контейнера, если они не занимают все доступное пространство по горизонтали или главной оси.
Синтаксис:
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;
Примечание: Значением по умолчанию для свойства justify-content является flex-start.
Пример: Объяснение Justify-Content на примере
<!DOCTYPE html>
<html>
<head><style>
.container {
width: 400px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
.container>div {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.center {
justify-content: center;
}
.start {
justify-content: flex-start;
}
.end {
justify-content: flex-end;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
</style>
</head>
<body><h2> Different Alignments with the CSS justify-content Property </h2><p> The following examples demonstrate
different values for the "justify-content" property: </p><div class="container center"><div style="background-color:coral;">
1
</div><div style="background-color:lightblue;">
2
</div><div style="background-color:pink;">
3
</div></div><p><b> justify-content: center </b> aligns items at
the center of the container. </p><div class="container start"><div style="background-color:coral;">
1
</div><div style="background-color:lightblue;">
2
</div><div style="background-color:pink;">
3
</div></div><p><b> justify-content: flex-start </b> aligns items
at the start of the container. </p><div class="container end"><div style="background-color:coral;">
1
</div><div style="background-color:lightblue;">
2
</div><div style="background-color:pink;">
3
</div></div><p><b> justify-content: flex-end </b> aligns
items at the end of the container. </p><div class="container space-between"><div style="background-color:coral;">
1
</div><div style="background-color:lightblue;">
2
</div><div style="background-color:pink;">
3
</div></div><p><b> justify-content: space-between </b> distributes
items evenly with space between them. </p><div class="container space-around"><div style="background-color:coral;">
1
</div><div style="background-color:lightblue;">
2
</div><div style="background-color:pink;">
3
</div></div><p><b> justify-content: space-around </b> distributes
items evenly with space around them. </p>
</body>
</html>
Вывод:
CSS Align-Items
CSS-свойство align-items определяет выравнивание элементов внутри flexbox или grid-контейнера.
Синтаксис:
align-items: normal | stretch | positional alignment | flex-start | flex-end | baseline | initial | inherit;
Значения свойств:
В приведенной ниже таблице кратко описаны значения, которые могут быть установлены для CSS-свойства align-items.
Примечание: Значение по умолчанию для свойства align-items - нормальное.
Пример: Объяснение align-items на примере
HTML <!DOCTYPE html>
<html>
<head><style>
.container {
width: 400px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
.container>div {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.stretch {
align-items: stretch;
}
.center {
align-items: center;
}
.start {
align-items: flex-start;
}
.end {
align-items: flex-end;
}
.baseline {
align-items: baseline;
}
</style>
</head>
<body><h2> Different Alignments with the CSS align-items Property </h2><p> The following examples demonstrate
different values for the "align-items" property: </p><div class="container stretch"><div style="background-color:coral;">
1
</div><div style="background-color:lightblue;">
2
</div><div style="background-color:pink;">
3
</div></div><p><b> align-items: stretch </b> makes items
stretch to fill the container
along the cross axis. </p><div class="container center"><div style="background-color:coral;">
1
</div><div style="background-color:lightblue;">
2
</div><div style="background-color:pink;">
3
</div></div><p><b> align-items: center </b> aligns items at
the center of the container along the cross axis. </p><div class="container start"><div style="background-color:coral;">
1
</div><div style="background-color:lightblue;">
2
</div><div style="background-color:pink;">
3
</div></div><p><b> align-items: flex-start </b> aligns items at the
start of the container along the cross axis. </p><div class="container end"><div style="background-color:coral;">
1
</div><div style="background-color:lightblue;">
2
</div><div style="background-color:pink;">
3
</div></div><p><b> align-items: flex-end </b> aligns items at the
end of the container along the cross axis. </p><div class="container baseline"><div style="background-color:coral;">
1
</div><div style="background-color:lightblue;">
2
</div><div style="background-color:pink;">
3
</div></div><p><b> align-items: baseline </b> aligns
items along their baseline. </p>
</body>
</html>
Вывод:
Ключевые отличия между Justify-Content и Align-Items
Вывод
Свойства CSS, такие как justify-content и align-items, могут быть использованы для выравнивания HTML-элементов в нужном положении или, скорее, для выравнивания в окне браузера. Но знание различий позволяет принимать более эффективные решения для более эффективного использования свойств CSS.
