Flex Container Development Tutorials, Guides & Insights

• Flex Container: The element on which display: flex is applied.
• Flex Item: Direct children of the flex container.
• Main Axis: The primary axis along which flex items are laid out.
• Cross Axis: The axis perpendicular to the main axis.
• Flex Direction: Determines the direction of the main axis (row, row-reverse, column, column-reverse).

Flexbox provides several properties for aligning flex items along the main and cross axes:

• grid-template-columns: Defines the number and size of columns.
• grid-template-rows: Defines the number and size of rows.
• grid-template-areas: Defines named grid areas.

.grid-container {
  grid-template-columns: 200px 1fr 100px;
  grid-template-rows: 100px auto;
}