Mastering the flexbox knowledge of CSS3, how to achieve flexible adjustment of grid layout?

Master the Flexbox knowledge of CSS3, how to achieve flexible adjustment of grid layout?

In modern web design, grid layout is a common layout pattern. With CSS3's Flexbox, we can implement grid layout more flexibly and dynamically adjust the layout. This article will introduce in detail how to use Flexbox to implement grid layout and give corresponding code examples.

Flexbox is a module in CSS3, which introduces a new layout method that can easily implement various complex layouts. Specifically, Flexbox divides the parent container into a main axis and a cross axis. The items on the main axis can be arranged according to the set ratio, and the items on the cross axis can be flexibly adjusted through some attributes.

First, we need to create a parent container on which to apply the Flexbox layout. Here is a basic HTML structure and corresponding CSS styles:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  flex: 1 0 25%; /* 设置项目的比例和初始大小 */
  margin: 5px;
  background-color: #ccc;
}

In the above example, we first applied display: flex;# on .grid-container ##, so that the container can use Flexbox layout. Then, we use flex-wrap: wrap; to set whether the item will be displayed in a new line when it exceeds the width of the parent container. Next, we set the scale and initial size of the items by using flex: 1 0 25%; on .grid-item. Among them, flex-grow: 1; means that the item can be enlarged as needed, flex-shrink: 0; means that the item will not shrink, flex-basis: 25%;Indicates that the initial size of the item is 25% of the width of the parent container.

With the above code, we implement a grid layout with four columns. However, when we need to adjust the grid layout, we can flexibly modify the style of

.grid-item.

First of all, we can control the proportion of the item by modifying the

flex property of .grid-item. For example, if we want the first item to be wider, we can change its flex property to 2 and the remaining items to 1. The code example is as follows:

.grid-item {
  flex: 2 0 25%; /* 第一个项目比例为2，其余项目比例为1 */
  margin: 5px;
  background-color: #ccc;
}

With the above modification, the width of the first item will become twice that of the other items.

In addition to modifying the proportion of items, we can also change the number of items in each row by adjusting the width of

.grid-container. For example, if we wanted to display only two items per row, we could set the width of .grid-container to twice the width of the items. The code example is as follows:

.grid-container {
  display: flex;
  flex-wrap: wrap;
  width: 50%; /* 每行只显示两个项目，宽度为100%的一半 */
}

.grid-item {
  flex: 1 0 25%;
  margin: 5px;
  background-color: #ccc;
}

With the above modification, only two items will be displayed in each row.

In summary, with the help of CSS3 Flexbox, we can achieve flexibly adjusted grid layout. By modifying the scale of the items and the width of the parent container, we can easily adjust the style of the grid layout to meet different design needs. I hope the introduction in this article can help you master Flexbox layout and realize flexible adjustment of grid layout.

Reference:

[CSS Flexible Box Layout - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout )
• [A Complete Guide to Flexbox - CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

The above is the detailed content of Mastering the flexbox knowledge of CSS3, how to achieve flexible adjustment of grid layout?. For more information, please follow other related articles on the PHP Chinese website!