


Justify-self and align-items properties should be used for the child of the parent element, if need be. So also justify-content and align-items properties. If set to column then the justify-content property will effect on the vertical plane while the align-items property will effect on the horizontal plane but if set to row then reverse is the case for the justify-content and align-items properties.įlexbox should be used on the parent element alone. The flex-direction property will determine what plane the justify-content and align-items properties will take effect. prefixed with flex, as well as display: flex, display: inline-flex, align-content. Then, the align-items: center property will center the container element on the horizontal plane (as against the vertical plane when it the flex-direction was set to row). Method of positioning elements in horizontal or vertical stacks. Since column favours the vertical plane, when you set the the flex-direction: column, the justify-content: center property centers the container element along the vertical plane (no longer the horizontal plane as it was when the flex-direction was set to row). Enter fullscreen mode Exit fullscreen mode
