Flexbox
The Flexible Box Layout, commonly known as Flexbox, is a new layout model that allows responsive elements within a container to be automatically arranged depending upon the screen size.
div {display: flex;}
Main Axis
When working with flexbox, there are two axes:
- The main axis
- The cross axis
Flexbox
- flex
- A shorthand that combines the flex-grow, flex-shrink, and flex-basis properties. This syntax allows for the concise delineation of flex item parameters with one line of code.
- flex-basis
- A property that defines the default size of a flex item.
- flex-direction
- A property that specifies the direction in which elements are distributed within a container.
- flex-flow
- A shorthand for specifying the flex-direction and flex-wrap properties. Defining flex-flow provides the parameters for child elements to be organized across the horizontal and vertical axes.
- flex-grow
- A property that specifies how much space an item may occupy relative to the other items in the container. An item assigned a flex-grow value of 3, will stretch to occupy 3 times more space than an item assigned a value of 1.
- flex-shrink
- Specifies how much space an item may be scaled down relative to the other items in the container (when items in the flex container are larger than the space available). An item assigned a flex-shrink value of 2, will be scaled twice as much as an item assigned a value of 1.
- flex-wrap
- A property that specifies if elements will occupy multiple lines and the direction in which the items are distributed.
