Guide to CSS adaptive layout properties: flex and grid

CSS adaptive layout property guide: flex and grid

Introduction:
In modern web development, responsive design has become a design that cannot be ignored trend. To accommodate various screen sizes and device types, CSS provides a number of layout properties, the two most commonly used of which are flexbox and grid. This article will introduce how to use these two properties, including specific code examples.

1. Flexbox layout attributes

1. display: flex
   This is the entry attribute of flexbox, used to specify an element to be laid out in flexbox layout. By setting display: flex, the child elements of the parent element will automatically become flex items and be arranged in a row.

Code example:

.container {
  display: flex;
}

2. flex-direction
   This property specifies the arrangement direction of flex items, the default is row (arranged from left to right). Other values ​​can be row-reverse, column (top to bottom), or column-reverse.

Code example:

.container {
  flex-direction: column;
}

3. justify-content
   Used to adjust the alignment of flex items on the main axis. Commonly used values ​​include flex-start (default, aligned from the beginning), center (aligned in the middle), flex-end (aligned at the end), and space-between (space between Items is evenly distributed), etc.

Code example:

.container {
  justify-content: center;
}

4. align-items
   This property is used to adjust the alignment of flex items on the cross axis. Commonly used values ​​include flex-start (default, top-aligned), center (center-aligned), flex-end (bottom-aligned), stretch (stretched to the same height as the container), etc.

Code example:

.container {
  align-items: center;
}

5. flex-wrap
   This property is used to control whether flex items wrap. By default, flex items wrap automatically. You can use the nowrap attribute value to prevent wrapping.

Code example:

.container {
  flex-wrap: wrap;
}

2. Grid layout attributes

1. display: grid
   This is the entry attribute of grid layout, used to specify An element is laid out in a grid layout. By setting display: grid, the child elements of the parent element will automatically become grid items and be laid out according to a grid.

Code example:

.container {
  display: grid;
}

2. grid-template-columns and grid-template-rows
   These two properties are used to define the columns and rows of the grid. size and quantity. You can define the size by specifying a specific width or percentage, or you can use the repeat function to repeatedly specify the size.

Code example:

.container {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px repeat(2, 1fr);
}

3. grid-gap
   This property is used to set the gap size between grid items. Gap size can be defined by specifying specific pixel values ​​or percentages.

Code example:

.container {
  grid-gap: 20px;
}

4. justify-items and align-items
   These two properties are used to adjust the alignment of grid items in grid cells respectively. Way. justify-items controls horizontal alignment, and align-items controls vertical alignment.

Code example:

.container {
  justify-items: center;
  align-items: center;
}

5. grid-auto-flow
   This property is used to adjust how the browser behaves when the grid container cannot accommodate all grid items. Place these items. Commonly used values ​​include row (placed according to rows), column (placed according to columns), dense (optimized grid filling), etc.

Code sample:

.container {
  grid-auto-flow: column;
}

Conclusion:
Flexbox and Grid are very powerful layout tools in modern CSS, and they provide great convenience for responsive design. By using these properties flexibly, we can easily create layouts that adapt to different screen sizes and device types. I hope this article can provide you with some useful guidance and be applied in actual projects.

The above is the detailed content of Guide to CSS adaptive layout properties: flex and grid. For more information, please follow other related articles on the PHP Chinese website!