Exploring CSS panel layout properties: flex and grid

Exploration of CSS panel layout properties: flex and grid

In modern web development, layout is a crucial aspect. In the past, we used fixed width and height to control layout, but with the rise of responsive design, we need a more flexible and adaptive layout method. CSS provides some powerful layout properties, the most commonly used of which are flex and grid. This article will introduce how to use these two properties and provide specific code examples.

1. flex layout

Flex layout is a flexible layout mode introduced in CSS3. It places the child elements within the container on a main axis and layouts them according to the space allocation rules on the main axis. The following are some commonly used flex attributes:

• display: flex;: Set the container to flex layout
• flex-direction: Specify the direction of the main axis, which can be row (default horizontal direction ), column (vertical direction), row-reverse (reverse horizontal direction) or column-reverse (reverse vertical direction)
• justify-content: Specifies the alignment of child elements on the main axis, which can be flex -start (start alignment), flex-end (end alignment), center (center alignment), space-between (align both ends, equal spacing in the middle) or space-around (align both ends, equal spacing between child elements)
• align-items: Specify the alignment of child elements on the cross axis, which can be flex-start (top alignment), flex-end (bottom alignment), center (center alignment), baseline (baseline alignment) Or stretch (stretch alignment)
• flex-wrap: Specify whether the child element wraps, which can be nowrap (no line wrap, default), wrap (line wrap) or wrap-reverse (reverse line wrap)

The following is a simple flex layout example:

<style>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

<div class="container">
  <div>项目1</div>
  <div>项目2</div>
  <div>项目3</div>
</div>

2. grid layout

Grid layout is another powerful layout system in CSS3. It divides the container into rows and columns and specifies in which cell the child elements should be placed. The following are some commonly used grid attributes:

• display: grid;: Set the container to a grid layout
• grid-template-columns: Specify the number and width of columns, you can use pixels (px), percentage (%), you can also use automatic (auto) or fraction (fr)
• grid-template-rows: Specify the number and height of rows, the usage is the same as above
• grid- column-gap: Specify the gap between columns
• grid-row-gap: Specify the gap between rows
• grid-template-areas: Specify the name of each cell, by using A matrix composed of text identifiers to define

The following is a simple grid layout example:

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item {
  background-color: #ddd;
  padding: 10px;
}
</style>

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

To sum up, flex and grid are commonly used layout attributes in modern web development . They provide powerful layout capabilities that allow us to create flexible and adaptive layouts. By rationally using these attributes, we can better control the layout of web pages and improve user experience.

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