Being flexible with #Flex

Hilo Folks!

I want to share a bit of my knowledge on the Attribute "Flex" in Html designing. Here we go!

"Flex is used to make elements come into a box which called the 'Flex Box'.
E.g:

<style>
 .Container{
display: flex}

The outer frame is known as Flex box and the elements within are called flex items. The flex can be modified accordingly with these flex properties.

These flex properties can be classified into two. Thus,
1.Parent Properties
2. Children Properties

Parent Properties:

• display - Must be set to flex or inline-flex
• flex-direction - Sets the display-direction of flex items
• flex-wrap - Specifies whether the flex items should wrap or not
• flex-flow - Shorthand property for flex-direction and flex-wrap
• justify-content - Aligns the flex items when they do not use all available space on the main-axis (horizontally)
• align-items- Aligns the flex items when they do not use all available space on the cross-axis (vertically)
• align-content- Aligns the flex lines when there is extra space in the cross axis and flex items wrap

Children Properties:

• order- Specifies the display order of the flex items inside the flex container
• flex-grow - Specifies how much a flex item will grow relative to the rest of the flex items
• flex-shrink - Specifies how much a flex item will shrink relative to the rest of the flex items
• flex-basis - Specifies the initial length of a flex item
• align-self - Specifies the alignment for the flex item inside the flex container

It's conducive to align the elements as desired and obtain inviting web pages.