Download to read offline
gdg_workshop 5 on web development HTML & CSS
- 1. CSS: Styling theWeb Learn the foundation of web development Organised by: GDG-SRGI & Coding Club
- 2. Harsh Agarwal Speaker (Web DevLead) Er. Aman Saluja Faculty Advisor
- 3. Session 2 • CSSADVANCE • DOUBTS
- 4. Flex Container properties Theseproperties are applied to the parent container (with display: flex or display: inline-flex). display: Values: flex, inline-flex Description: Establishes a flex container, enabling its children to become flex items. Flex Container
- 5.
- 7. Flex Container flex-direction: Values: row,row-reverse, column, column-reverse Description: Defines the direction of the main axis (horizontal or vertical). flex-wrap: Values: nowrap, wrap, wrap-reverse Description: Controls whether flex items should wrap onto multiple lines.
- 8.
- 9.
- 10.
- 12. Flex Container align-content: Values: stretch,flex-start, flex-end, center, space-between, space-around Description: Aligns rows when there's extra space on the cross axis (only works with wrapped content). gap, row-gap, column-gap: Values: Any length value (e.g., 10px, 1rem) Description: Adds spacing between flex items (gap applies to both rows and columns).
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 23. Flex Item Properties Theseproperties are applied to the child elements (flex items). order: Values: Any integer (default is 0) Description: Controls the order of the flex items. Items with lower values appear first. flex-grow: Values: Any non-negative number (default is 0) Description: Determines how much an item should grow relative to others when extra space is available.
- 25. Flex Item Properties flex-shrink: Values:Any non-negative number (default is 1) Description: Determines how much an item should shrink relative to others when space is insufficient. flex-basis: Values: Any length or auto (default is auto) Description: Sets the initial size of an item before flex-grow or flex-shrink is applied.
- 27. Flex Item Properties flex: Shorthandfor flex-grow, flex-shrink, and flex-basis Values: none (0 0 auto), auto (1 1 auto), <flex-grow> <flex-shrink> <flex-basis> Description: A shorthand property for flexible sizing. align-self: Values: auto, flex-start, flex-end, center, baseline, stretch Description: Overrides align-items for individual flex items.
- 29.
- 30.