Flex property which is used to achieve the responsive design without using any frontend (UI) frameworks. Flex property which was introduced in the css3 and it was supported by all the latest browerser.
Flex Direction Property which is for achiveing the direction of the columns. How the columns should flow. Its has 4 property.
1. ROW (Default) : This is the default property which flows from left to right(ltr). Main it flows in the x - direction
2. ROW-REVERSE : This property which is used to flow from right to left(rtl). This flows in the x - direction
3. COLUMN : This property which is used to flow from top to bottom. All the columns inside the flex container will start from top and end at the bottom.
4. COLUMN-REVERSE : This property which is used to flow from bottom to top. All the columns inside the flex container will start from bottom and end at the top.
Flex Wrap is a property which will wrap the columns to the next row which are going out of the flex container. It has three options.
1. NOWRAP : No wrap will not wrap the columns to the next row. It will try to adjust all the columns in a single row.
2. WRAP : Wrap will used to wrap the columns to the next row which columns are going out of the flex container.
3. WRAP-REVERSE : Wrap Reverse which is similar to the wrap property but wrap will happen in the reverse order.
By default flex property tries to fit all the columns in a single row.
Flex flow is the shortand property of flex wrap and flex direction.
flex-flow: [direction] [wrap];
1. FLEX-START : This is used to start the columns from the left. This is the default property. Similar to float: left
2. FLEX-END : This is used to end the columns in the right. So starting of the column is not in the left. But based on the number of columns it will start the position. Similar to float: right
3. CENTER : This is used to align all the columns to the center.
4. SPACE BETWEEN : This is used to give a space in between the columns. But not the first and last columns.
5. SPACE AROUND : This is used to give a space in between the columns which also includes the first and last columns.
1. STRETCH : This is used to make all the columns inside the flex of same height irrespective of their content inside the div. This is the default property.
2. FLEX-START : This is used to start the columns from the top but height of the div will be based on their content.
3. FLEX-END : This is used to end the columns in the bottom but height of the div will be based on their content
4. CENTER : This is used to align all the columns to the center vertically, height will remain based on their content.
4. BASELINE : This is used to align all the columns based on their content end line inside the div.
1. STRETCH : Lines stretch to take up the remaining space. This is the default property.
2. FLEX-START : Lines packed to the start of the container.
3. FLEX-END : Lines packed to the end of the container
4. CENTER : Lines packed to the center of the container
4. SPACE BETWEEN : Lines evenly distributed; the first line is at the start of the container while the last one is at the end
4. SPACE AROUND : Lines evenly distributed with equal space around each line