.container { display: flex; /* включить flex */ justify-content: center; /* по горизонтали */ align-items: center; /* по вертикали */ flex-direction: row; /* row | column */ flex-wrap: wrap; /* перенос элементов */ gap: 20px; /* отступ между элементами */ } .item { flex: 1; /* занимает всё место */ } 📐 justify-content: • center, flex-start, flex-end • space-between, space-around, space-evenly 📏 align-items: • center, flex-start, flex-end • stretch, baseline 💡 Flexbox = центрирование за 2 строчки!
🎨 CSS: Flexbox
.container {
display: flex; /* включить flex */
justify-content: center; /* по горизонтали */
align-items: center; /* по вертикали */
flex-direction: row; /* row | column */
flex-wrap: wrap; /* перенос элементов */
gap: 20px; /* отступ между элементами */
}
.item {
flex: 1; /* занимает всё место */
}
📐 justify-content:
• center, flex-start, flex-end
• space-between, space-around, space-evenly
📏 align-items:
• center, flex-start, flex-end
• stretch, baseline
💡 Flexbox = центрирование за 2 строчки!
