Css Programming Tutorials, Guides & Best Practices

Flexbox is a one-dimensional layout model that excels at aligning items along a single axis, either horizontally or vertically. It is particularly useful for distributing space and aligning items in a container.

• 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).

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

• Grid lines: Used to place items within the grid.
• Grid tracks: Rows or columns in the grid.