Student-friendly HTML, CSS, and JavaScript reference with examples
The justify-content property aligns flex items along the main axis (horizontally for row, vertically for column).
.container {
display: flex;
justify-content: center;
}Common values:
flex-start - Align to the start (left for row, top for column) center - Center the items flex-end - Align to the end (right for row, bottom for column) space-between - Space items evenly, first and last touch edges space-around - Space items evenly with space on the sides Visual example:
/* Center buttons horizontally */
.button-row {
display: flex;
justify-content: center;
gap: 10px;
}