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:
1234
.grid-container { display: flex; flex-wrap: wrap; } .grid-item { flex: 1 0 25%; /* 设置项目的比例和初始大小 */ margin: 5px; background-color: #ccc; }
In the above example, we first applieddisplay: 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.
.grid-item.
flexproperty of
.grid-item. For example, if we want the first item to be wider, we can change its
flexproperty to
2and the remaining items to
1. The code example is as follows:
.grid-item { flex: 2 0 25%; /* 第一个项目比例为2,其余项目比例为1 */ margin: 5px; background-color: #ccc; }
.grid-container. For example, if we wanted to display only two items per row, we could set the width of
.grid-containerto 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; }
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!