xxxxxxxxxx
align-items determine how remaining space in the container will be
distributed around the flex elements if there is any remaining space
in the container cross axis.
it accepts 4 values
flex-start, flex-end,center and stretch(the default )
.flex-container {
display:flex; /* here flex-direction is row.so cross axis is vertical line. */
align-items:center; /*vertical center */
justify-content:center; /*horizontal center */
}
.flex-container2 {
display:flex;
flex-direction: column;/*here flex-direction is column.so cross axis is horizontal. */
align-items:center; /*Horizonal center */
justify-content:center; /*Vertical center */
}
xxxxxxxxxx
.box {
display: flex;
align-items: center;
justify-content: center;
}
.box div {
width: 100px;
height: 100px;
}