Flex Box – display: flex
Flex Box is a CSS layout module that is enabled when you set flex in the display property. When you set display: flex for the parent element, the parent element becomes a flex container while the child elements become flex items, which are horizontally laid out by default.
Additional Properties
Setting display: flex to the parent element is just making the parent element a flex container and the child elements flex items. You can customize how Flex Box should behave by using additional properties. The properties below are key properties that work in Flex Box Layout:
flex-directionflex-wrapjustify-contentalign-itemsalign-contentalign-selfflex-growflex-shrinkflex-basis
We'll explain these properties one by one in this chapter.
Practice
Subscribe now for
uninterrupted access.