Guide to CSS adaptive layout properties: flex and grid

PHPz
Release: 2023-10-27 17:48:29
Original
1004 people have browsed it

CSS 自适应布局属性指南:flex 和 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;
}
Copy after login
  1. 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;
}
Copy after login
  1. 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;
}
Copy after login
  1. 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;
}
Copy after login
  1. 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;
}
Copy after login

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;
}
Copy after login
  1. 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);
}
Copy after login
  1. 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;
}
Copy after login
  1. 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;
}
Copy after login
  1. 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;
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!