What is CSS Flex box?
Flexible Box is a layout module, makes it easier to design flexible responsive layout structure without using float or positioning.
As a front end developer you should know following 10 CSS properties when using flexbox layout.
- display | flex | block | grid …
- flex | flex-grow |flex-shrink| flex-basis (short version for all 3 properties)
- flex-direction | column | column-reverse | row | row-revers
- flex-wrap | wrap | nowrap | wrap-reverse
- flex-flow (combination of flex-direction & flex-wrap or short version for 3,4)
- justify-content | center |end|start|left|right| flex-start | flex-end |stretch (Align items horizontally — )
- align-items | center |end|start|left|right| flex-start | flex-end |stretch | baseline | (Align items vertically |)
- align-content | center | flex-start | flex-end |stretch
- align-self |stretch|center|flex-start|flex-end|baseline
- order | order
Lets create our first Flex box layout
1. display:flex
Simply turn a normal div into a flex box layout by adding the display:flex css property.
2. justify-content
justify-content | center |end|start|left|right| flex-start | flex-end |stretch (Align items horizontally — )
Horizontally aligns the flex items inside the flex container
3. flex-direction
flex-direction |column | column-revers | row | row-revers
flex-direction property defines the direction of the flex container wants to layout the flex items.
4. flex-wrap
flex-wrap | wrap | nowrap | wrap-reverse
turns the flex-container to wrap / nowrap / wrap-reverse the flex items
5. flex-flow
flex-flow <column | column-reverse | row | row-revers> <wrap | nowrap | wrap-reverse>
combination of both flex-wrap, flex-direction
6. align-items
align-items | center |end|start|left|right| flex-start | flex-end |stretch | baseline | (Align items vertically |)
This property is used to align the flex items vertically inside the flex container, the perfect way to center an element vertically & horizontally.
7. align-content
align-content | center | flex-start | flex-end |stretch
8. align-self
align-self |stretch|center|flex-start|flex-end|baseline
This property gives a specific alignment rule for the selected flex item inside the flex container.
9. flex
flex <flex-grow> |< flex-shrink> | <flex-basis>
Flex is a shorthand version of (flex-grow, flex-shrink, flex-basis) this property is bit tricky when it comes to the actual usage. The property gives the defined length, regardless of its content.
1. Flex-grow | number | default values - 0, 1 , auto
This property specifies how much a flex item will shrink relative to other flex items in the flex container.
2. Flex-shrink | number | default values - 0,1, auto
This property specifies how much a flex item will shrink relative to other flex items in the flex container.
3.Flex-basis | number | default values - auto
This property specifies the initial length of a flex item & flex item will not shrink or grow form the flex-basis value.
10. Order
order|number | default value - 0
This property specifies the order of a flex item inside the flex container.
