What is the difference between display flex and display grid? How do you align elements in flex?

display: flex and display: grid are different layout models in CSS.

• Flexbox (flex) is designed for one-dimensional layout of elements. It is well-suited for aligning elements along a single axis (horizontal or vertical).
• Grid is a two-dimensional system that allows creating complex layouts with rows and columns.

Aligning elements in flex

• justify-content — aligns along the main axis (e.g., horizontally in a row): flex-start, center, space-between, etc.
• align-items — aligns along the cross axis (e.g., vertically in a row): flex-start, center, stretch, etc.
• align-self — individual alignment for a specific element.

Example:

.container {
  display: flex;
  justify-content: center; /* horizontally centered */
  align-items: center;    /* vertically centered */
  height: 200px;
}