"Flexible Box Model" - aims to provide a more efficient way to style pages
- Items contained inside a flex container with "flex" to best fit the available space.
- Flexbox layout is direction-agnostic making it more flexible than other layout models (block layout being vertically-biased, and inline layout being horizontally-biased).
- Flexy layouts are responsive – they will grow/shrink as specified to fit different screen sizes
The flex layout is based on "flex-flow directions". If the flex-direction is set to row (default), the flex axes will look as follows:
Why not just call the axes x and y like everything else? Well, this would assume that the x is horizontal, and the y is vertical. However, with flexbox, this is not always the case, since it flips depending on the flex direction! So instead, we have these:
- main axis: By default, this will be horizontal. Technically speaking, it is the primary axis along which flex items are laid out. If the
flex-directionis set tocolumn, the main axis will now be vertical! - cross axis: By default, this will be vertical. It will always be perpendicular to the main axis.
These properties will apply to the container, and affect the arrangement of the items it contains.
display: This will kick the whole thing off! (display: flex;)flex-direction: Establish the main axis. This will tell flex items inside the flex container how to align themselves.flex-wrap: Will the items in the container wrap at all?justify-content: Defines alignment of items in the container along the main axis.align-items: Defines alignment of items in the container along the cross axis. (This is like thejustify-contentfor the cross axis)
These properties will apply to the specific items they are placed on.
flex-grow: An item can grow if necessary. (An item withflex-grow: 2will try to take up 2x as much space as other items withflex-grow: 1)flex-shrink: An item can shrink if necessary.align-self: Override what is specified withalign-itemsfor this specific item.