Loading...
Loading...
CSS flexbox align-items or justify-content not workingFlexbox properties only work on the direct children of the flex container. A common mistake is applying flex properties to the wrong element, or forgetting to set display: flex on the parent.
Flex properties are applied to the container, not the children.
/* ❌ Missing display: flex */
.container {
justify-content: center; /* has no effect without flex */
}
/* ✅ Correct */
.container {
display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
}align-items: center only works if the container has a defined height.
/* ✅ Full-height centered layout */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* or any fixed height */
min-height: 100%;
}justify-content controls the main axis (horizontal by default), align-items controls the cross axis (vertical by default).
/* Default flex-direction: row */
.container {
display: flex;
justify-content: center; /* horizontal (main axis) */
align-items: center; /* vertical (cross axis) */
}
/* With flex-direction: column, axes flip */
.container {
display: flex;
flex-direction: column;
justify-content: center; /* now vertical (main axis) */
align-items: center; /* now horizontal (cross axis) */
}