Ideas - -Full Stack MERN Web Development
Flex Positioning Reference Index
There are two components to a Flexbox
- the Flex Container,
- and the Flex Items
- Flex Container
- The parent container holding the "flex items".
- Flex Container is defined with [display: flex;] or [display: inline-flex;].
- Use Flex container for a single dimensional row/column layout.
- Flex Items
- Children become "Flex Items" automatically.
- Flex Items are immediate children within the container.
- they are individual items within a flex container
- They can be various HTML elements.
- They adopt the parent container's flex properties.
- The can also have their own flex properties for layout and alignment.
- Use Flex items for aligning, reordering, or resizing, within a container.
- Cautions
- Flex Items are the immediate children of the parent container only.
- Be cautious with "flex" properties on items as they can override the parent.
- Limit Flexbox to one dimensional layouts, not the entire page layout.