Flexbox layout
- simplifies positioning elements
- Flex containers and flex items
- designate an element as a flex container by setting its (display) property to flex or inline-flex.
- several properties that specify how it behaves
- justify-content, align-items, flex-grow, flex-shrink, flex-basis, flex, flex-wrap, align-content, flex-direction, flex-flow.
.container{ display:flex; }
-justify-content: position items from left to right
align-items: makes it possible to space flex items vertically
flex-grow: allows you to specify if items should grow to fill a container and which should item grows proportionally more/less than others
flex-shrink: which elements will shrink and in what proportions.
flex-basis: allows you to specify width before it shrinks or stretches. ( lock width )
flex: lets you declare flex-grow, flex-shrink, and flex-basis in one line
flex-wrap: Allow content to move to the next link when necessary.
align-content: allows you to move multiple rows of content
Flex-direction:
allows you to switch between main axes and cross axis. So they can be ordered vertically or horizontally.
-The flex-direction property can accept four values:
- row — elements will be positioned from left to right across the parent element starting from the top left corner (default).
- row-reverse — elements will be positioned from right to left across the parent element starting from the top right corner.
- column — elements will be positioned from top to bottom of the parent element starting from the top left corner.
- column-reverse — elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner.
flex-flow: used to declare both the flex-wrap and flex-direction properties in one line.
Top comments (0)