Разница между align-content и align-items
Опубликовано: 31 Января, 2022
И align-content, и align-items работают на поперечной оси. Поперечная ось в flexbox зависит от flex-direction и проходит перпендикулярно основной оси, если flex-direction либо row, либо row-reverse, то перекрестная -axis является вертикальным, если flex-direction является столбцом или обратным столбцом, то поперечная ось горизонтальна.
| выровнять контент | выровнять элементы |
|---|---|
| Это свойство flex-box выравнивает гибкие линии относительно друг друга вдоль поперечной оси. | Это свойство flex-box выравнивает гибкие элементы в пределах гибкой линии вдоль поперечной оси. |
| Это свойство работает, только если для свойства «flex-wrap:» задано значение wrap. | Это свойство работает, даже если для свойства «flex-wrap:» не задано значение wrap. |
| Это свойство не действует, если количество гибких линий равно 1. | Это свойство не зависит от количества гибких линий. |
Свойство align-content принимает 6 различных значений:
| Свойство align-items принимает 5 различных значений:
|
Синтаксис:
- выровнять контент:
element{
align-content:stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;
// CSS Property
} - выровнять элементы:
element{
align-items:stretch | center | flex-start | flex-end | baseline | initial | inherit;
// CSS Property
}
Example for align-content
<!DOCTYPE html><html lang="en"> <head> <title>Align-content</title> <style> /* flex-container(flex-box) */ .flex { background-color: greenyellow; margin: 2% 2%; padding: 0% 3%; float: left; height: 500px; width: 50px; border: 1px solid black; display: flex; flex-wrap: wrap; flex-direction: row; } /* flex-start */ .flexStart { align-content: flex-start; } /* flex-end */ .flexEnd { align-content: flex-end; } /* center */ .center { align-content: center; } /* space-between */ .spaceBetween { align-content: space-between; } /* space-around */ .spaceAround { align-content: space-around; } /* stretch */ .stretch { align-content: stretch; } ul { list-style: none; } .flex-item { background: green; padding: 5px; width: 50px; margin: 5px; line-height: 10px; color: white; font-weight: bold; } </style></head> <body> <ul class="flex flexStart"> <li class="flex-item"> <p>F</p> </li> <li class="flex-item"> <p>LE</p> </li> <li class="flex-item"> <p>X</p> </li> <li class="flex-item"> <p>ST</p> </li> <li class="flex-item"> <p>A</p> </li> <li class="flex-item"> <p>RT</p> </li> </ul> <ul class="flex flexEnd"> <li class="flex-item"> <p>F</p> </li> <li class="flex-item"> <p>LE</p> </li> <li class="flex-item"> <p>X</p> </li> <li class="flex-item"> <p>E</p> </li> <li class="flex-item"> <p>N</p> </li> <li class="flex-item"> <p>D</p> </li> </ul> <ul class="flex center"> <li class="flex-item"> <p>C</p> </li> <li class="flex-item"> <p>E</p> </li> <li class="flex-item"> <p>N</p> </li> <li class="flex-item"> <p>T</p> </li> <li class="flex-item"> <p>E</p> </li> <li class="flex-item"> <p>R</p> </li> </ul> <ul class="flex spaceBetween"> <li class="flex-item"> <p>SP</p> </li> <li class="flex-item"> <p>AC</p> </li> <li class="flex-item"> <p>EB</p> </li> <li class="flex-item"> <p>ET</p> </li> <li class="flex-item"> <p>WE</p> </li> <li class="flex-item"> <p>EN</p> </li> </ul> <ul class="flex spaceAround"> <li class="flex-item"> <p>SP</p> </li> <li class="flex-item"> <p>AC</p> </li> <li class="flex-item"> <p>E</p> </li> <li class="flex-item"> <p>AR</p> </li> <li class="flex-item"> <p>OU</p> </li> <li class="flex-item"> <p>ND</p> </li> </ul> <ul class="flex stretch"> <li class="flex-item"> <p>S</p> </li> <li class="flex-item"> <p>T</p> </li> <li class="flex-item"> <p>R</p> </li> <li class="flex-item"> <p>E</p> </li> <li class="flex-item"> <p>T</p> </li> <li class="flex-item"> <p>CH</p> </li> </ul></body> </html> |
Выход
Example for align-items
<!DOCTYPE html><html lang="en"> <head> <title>Align-items</title> <style> /* flex-container(flex-box) */ .flex { background-color: greenyellow; margin:0; padding:0% 2%; float: left; height: 200px; width: 160px; border: 1px solid black; display: flex; flex-direction: row; } /* flex-start */ .flexStart { align-items: flex-start; } /* flex-end */ .flexEnd { align-items: flex-end; } /* center */ .center { align-items: center; } /* baseline */ .baseLine { align-items: baseline; } /* stretch */ .stretch { align-items: stretch; } ul { list-style: none; } .flex-item { background: green; padding: 0px; width: 40px; margin: 0px; line-height: 10px; color: white; font-weight: bold; text-align:center; } </style></head> <body> <ul class="flex flexStart"> <li class="flex-item"> <p>F</p><br> <p>LE</p> </li> <li class="flex-item"> <p>X</p> </li> <li class="flex-item"> <p>ST</p><br> <p>A</p> </li> <li class="flex-item"> <p>RT</p> </li> </ul> <ul class="flex flexEnd"> <li class="flex-item"> <p>F</p><br> <p>LE</p> </li> <li class="flex-item"> <p>X</p> </li> <li class="flex-item"> <p>E</p><br> <p>N</p> </li> <li class="flex-item"> <p>D</p> </li> </ul> <ul class="flex center"> <li class="flex-item"> <p>C</p><br> <p>E</p> </li> <li class="flex-item"> <p>N</p> </li> <li class="flex-item"> <p>T</p><br> <p>E</p> </li> <li class="flex-item"> <p>R</p> </li> </ul> <ul class="flex baseLine"> <li class="flex-item"> <p>BA</p><br> <p>S</p> </li> <li class="flex-item"> <p>E</p> </li> <li class="flex-item"> <p>LI</p><br> <p>N</p> </li> <li class="flex-item"> <p>E</p> </li> </ul> <ul class="flex stretch"> <li class="flex-item"> <p>S</p><br> <p>T</p> </li> <li class="flex-item"> <p>R</p> </li> <li class="flex-item"> <p>E</p><br> <p>T</p> </li> <li class="flex-item"> <p>CH</p> </li> </ul></body> </html> |
Выход 