CSS Flexbox With Bootstrap
CSS Flexbox With Bootstrap
(AUTONOMOUS)
BHARATHI SALAI, RAMAPURAM, CHENNAI – 89
DEPARTMENT OF MECHANICAL ENGINEERING
Presented by
SHREERAAM G 310619114082
SRIRAM KUMAR T 310619114086
SUSEENDRAN M S 310619114094
1
Agenda
•Introduction to Flexbox
•Flexbox Properties
• Flex direction
• Flex wrap
• Justify content
• Align items
• Align self
• Gap
• Child Element Properties
display: flex;
flex-direction: row;
row-reverse;
column;
column-reverse;
Flex-direction
flex-wrap: wrap;
no-wrap;
wrap-reverse;
column-reverse no-wrap;
Flex-wrap etc.,
gap: 10px;
30px;
10px 30px;
}
ORDER:
The order property controls the order in which the element has to be displayed.
FLEX-GROW:
In what ratio should the container’s remaining space be distributed to the child element?
The default value is 1.
FLEX-SHRINK:
In what ratio, the child element has to shrink if the screen size or window changes? The
default value is 1.
FLEX-BASIS:
The minimum or maximum threshold value below or above which the flex-grow or shrink
ALIGN-SELF:
Over-ride align-items property and align each child element individually.
transition should change. The default value is 0.
All the properties we have seen till now can be created just by adding a class
name to either the parent container (or) child element.