How to create layout with Flexbox:
Understand the Flexbox structure:
📝 Flex Container CSS Properties:
👉 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly.
💡 To align items along the main axis (horizontally by default)
👉 align-items: stretch | flex-start | flex-end | center | baseline.
💡 To align items along the cross axis (vertically by default)
👉 gap: length.
💡 To create space between items (manually)
👉 flex-direction: row | row-reverse | column | column-reverse.
💡 To align items horizontally or vertically.
👉 flex-wrap: nowrap | wrap | wrap-reverse.
💡 To allow items to wrap into a new line.
👉 flex-flow: flex-direction flex-wrap;
💡 Shorthand for the values of 2 Properties.
📝 Flex Items CSS Properties:
👉 align-self: auto | stretch | flex-start | flex-end | center | baseline.
💡 To overwrite align*item of individual flex items.
👉 flex-grow: 0 | integer.
💡 To allow item to grow (0 means no, 1+ means yes)
👉 flex-shrink: 1 | integer.
💡 To allow item to shrink (0 means no, 1+ means yes)
👉 flex-basis: auto | length.
💡 To define item width instead of the width property.
👉 flex: integer integer length
💡 Shorthand for flex-grow, -shrink, -basis.
👉 order: 0 | integer.
💡 To control the order of items