Flexbox and Grid Properties in CSS

Flexbox and Grid are powerful layout systems in CSS for creating complex and responsive designs. Here’s a brief overview of their key properties:

Flexbox Properties

1. display: flex

• Defines a flex container and enables flexbox layout for its children.

• Values: flex, inline-flex.

  display: flex;
  

2. flex-direction

• Defines the direction flex items are placed in the flex container.

• Values: row (default), row-reverse, column, column-reverse.

  flex-direction: column;
  

3. flex-wrap

• Specifies whether flex items should wrap onto multiple lines.

• Values: nowrap (default), wrap, wrap-reverse.

  flex-wrap: wrap;
  

4. flex-flow

• A shorthand for flex-direction and flex-wrap.

• Values: Combination of flex-direction and flex-wrap.

  flex-flow: row wrap;
  

5. justify-content

• Aligns flex items along the main axis (horizontal if flex-direction: row).

• Values: flex-start (default), flex-end, center, space-between, space-around, space-evenly.

  justify-content: space-around;
  

6. align-items

• Aligns flex items along the cross axis (vertical if flex-direction: row).

• Values: stretch (default), flex-start, flex-end, center, baseline.

  align-items: center;
  

7. align-content

• Aligns flex lines within the flex container.

• Values: stretch (default), flex-start, flex-end, center, space-between, space-around.

  align-content: space-between;
  

8. align-self

• Allows the default alignment to be overridden for individual flex items.

• Values: auto (default), flex-start, flex-end, center, baseline, stretch.

  align-self: flex-end;
  

9. flex-grow

• Defines the ability of a flex item to grow relative to the rest of the flex items.

• Values: Number (default is 0).

  flex-grow: 1;
  

10. flex-shrink

• Defines the ability of a flex item to shrink relative to the rest of the flex items.

• Values: Number (default is 1).

  flex-shrink: 2;
  

11. flex-basis

• Defines the default size of a flex item before any remaining space is distributed.

• Values: Length (e.g., px, em), Percentage (%), or auto.

  flex-basis: 200px;
  

12. flex

• A shorthand for flex-grow, flex-shrink, and flex-basis.

• Values: none, auto, flex-grow flex-shrink flex-basis.

  flex: 1 1 200px;
  

Grid Properties

1. display: grid

• Defines a grid container and enables grid layout for its children.

• Values: grid, inline-grid.

  display: grid;
  

2. grid-template-columns

• Defines the number and size of columns in a grid.

• Values: Length (e.g., px, em), Percentage (%), auto, min-content, max-content, fr.

  grid-template-columns: 1fr 2fr;
  

3. grid-template-rows

• Defines the number and size of rows in a grid.

• Values: Length (e.g., px, em), Percentage (%), auto, min-content, max-content, fr.

  grid-template-rows: 100px auto;
  

4. grid-template-areas

• Defines a grid template by naming areas of the grid.

• Values: A string with names of grid areas.

  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  

5. grid-column

• Defines how many columns an item should span or its position within the columns.

• Values: span <number>, <start-line> / <end-line>.

  grid-column: span 2;
  

6. grid-row

• Defines how many rows an item should span or its position within the rows.

• Values: span <number>, <start-line> / <end-line>.

  grid-row: 1 / 3;
  

7. grid-column-gap (or column-gap)

• Sets the gap between columns in the grid.

• Values: Length (e.g., px, em).

  column-gap: 20px;
  

8. grid-row-gap (or row-gap)

• Sets the gap between rows in the grid.

• Values: Length (e.g., px, em).

  row-gap: 10px;
  

9. grid-gap (or gap)

• A shorthand for grid-row-gap and grid-column-gap.

• Values: Length (e.g., px, em).

  gap: 10px 20px;
  

10. justify-items

• Aligns grid items along the inline (row) axis.

• Values: start, end, center, stretch.

  justify-items: center;
  

11. align-items

• Aligns grid items along the block (column) axis.

• Values: start, end, center, stretch.

  align-items: start;
  

12. justify-content

• Aligns the entire grid along the inline (row) axis.

• Values: start, end, center, stretch, space-between, space-around, space-evenly.

  justify-content: space-between;
  

13. align-content

• Aligns the entire grid along the block (column) axis.

• Values: start, end, center, stretch, space-between, space-around, space-evenly.

  align-content: center;