• Layout Modes
  • display: flex; (Flexbox)
  • display: grid; (Grid)
  • display: inline-block; (Inline Block)
• Flexbox
  • flex-direction (Defines the main axis) row, column
  • flex-wrap (Controls wrapping behavior) nowrap, wrap
  • justify-content (Aligns items on the main axis) center, space-between
  • align-items (Aligns items on the cross-axis) center, stretch
  • align-content (Aligns multiple flex lines)
  • Flex Item Properties
    • flex-grow (Controls how much an item grows)
    • flex-shrink (Defines how an item shrinks)
    • flex-basis (Sets the initial size)
    • flex (Shorthand for flex-grow flex-shrink flex-basis)
• Float
  • float: left; (Floats element to the left)
  • float: right; (Floats element to the right)
  • clear: both; (Prevents float overlap)
• Sizing
  • width / height (Defines width and height)
  • max-width / min-width (Limits width)
  • max-height / min-height (Limits height)
• Spacing
  • margin (Outer spacing)
  • padding (Inner spacing)
• Positioning
  • position: static; (Default positioning)
  • position: relative; (Relative to its normal position)
  • position: absolute; (Relative to the nearest positioned ancestor)
  • position: fixed; (Relative to the viewport)
  • position: sticky; (Behaves like relative, but sticks when scrolling)
  • top / bottom / left / right (Offsets the element’s position)
  • z-index (Controls stacking order)