Difference between flex-start and baseline for align-items in CSS

flex-start vs baseline#

Summary#

• align-items: flex-start aligns the child elements at the start of the flex box's cross axis.
• align-items: baseline` aligns the child elements to the text baseline of the flex box's cross axis.
  • Use this when you need to list the text of the children in a flex box based on their text.
  • Somehow, I think it might be harder to debug the CSS because it creates one more deps. (parent - child - child's text)