The most important concepts you need to understand about Flexbox is the Flex Container and Flex Items.
Main Axis and cross Axis
Flexbox container always have direction and by default the direction is from horizontal (left to right). We can change this direction behavior by specifying the CSS property of flex-direction to column if we want to layout the elements inside the Flexbox container from top to bottom.
By default the flexbox container will layout the elements at the start (or left aligned). We can change this behavior by specifying the justify-content to either flex-start, flex-end, center, space-around, space-evenly, or space-between.
I got questions related to this course module:
- Is it possible to combine the justify-content values for example combining the flex-start with space-around?
The Flex Property
By default the elements inside the flexbox container will have the width fit with the content inside of the element (text or another element). If we want to set the elements to have equal width, set the value of flex to 1 or any other value greater than 1 it will still set the equal width to the elements.
Aligning items vertically can be done using the align-items property. If we combined the align-items: center and justify-content: center then we can layout the elements vertically and horizontally relative to the container.
Note the the align-items should set in the container.
If we want to align one element inside the container, then we can use align-self property in the element to do that.
By default Flexbox won’t allow the elements inside the container to be wrapped. If we want to push down elements inside the container when the parent width no longer has enough space, set the value of flex-wrap to wrap.
Grow Shrink Basis
The flex: 1 is actually a shorthand of the following rules:
- flex: 1 1 0
- flex-grow: 1; flex-shrink: 1; flex-basis: 0;