Introduction to flexible layout of responsive layout

The implementation of responsive layout is a very big leap in front-end engineering. Its very flexible moldability allows the same website to show different vitality on different terminal devices. Taking this opportunity today, I would like to share with you and discuss some elastic layout that are commonly used to implement responsive layout methods.

Flexible layout is a very convenient way to implement responsive layout that only relies on CSS styles. It is also the most commonly used method by K to implement responsive layout. Especially now, the pages of e-commerce websites or mobile apps such as Taobao and Taobao can be easily implemented using elastic layout. The following is a copy of Taobao’s mobile app using elastic layout. part of the page.

## As you can see, especially when small icons are arranged or areas are frequently divided, the flexibility The layout is very convenient. Next, K will take you to review the flexible layout (display:flex).

Flexible layout flex is an attribute value of display in CSS. By adding the display:flex; attribute to the parent container, you can achieve flexible layout of its child elements in the parent element. But it should be noted that the display:flex; style will only apply to the parent container and non-generational child containers that add this attribute. In other words, the dialog:flex; attribute on the parent container It will not cause flexible layout for the child elements in its immediate child elements. Generally speaking, a father can only control his son, but not his grandson. If we want to continue using flexible layout in the next layer, we can add the display:flex; attribute to the corresponding child element again to achieve this.

Flexible layout has corresponding attributes on the parent and child elements to regulate the "elasticity" of the child elements in the parent element.

On the parent element, the properties related to flexible layout that we often use mainly include flex-direction, flex-wrap, justify-content, align-items, align-content, These attributes regulate the flexibility of the item in the parent element from the direction of the main axis, whether to wrap, the alignment of the item on the main axis, the alignment of the item on the cross axis, and the alignment of the item on multiple axes.

On child elements, the properties related to flexible layout that we often use mainly include order, flex-grow, flex-shrink, flex-basis, and align-self. Each attribute regulates the flexibility of the project itself from the sorting of the project, the project enlargement ratio, the project reduction ratio, the main axis space occupied by the project, and the alignment of a single project on the cross axis.

You can find the specific attribute values ​​​​and functions of the above in my blog (). Here I will tell you about some of the confusions I felt at the time.

　 (1) Main axis and cross axis. In flexible layout, the main axis and the direction of the main axis depend on the attribute value of the flex-direction attribute. It can be in the horizontal direction or the vertical direction, or it can be forward or positive. Reverse, here, friends who are exposed to this concept for the first time should pay attention. Never equate "main axis" with "horizontal forward", although the default value specified in CSS is like this. The cross axis represents the axis perpendicular to the main axis.

　(2)Baseline. In the elastic layout, the word "baseline" is also mentioned. The baseline refers to the lower edge of the letter x. The so-called baseline alignment of many attribute values ​​refers to aligning along the lower end of a lowercase x in a row, as if there is always a template for comparison.

　 (3) Multiple crossing axes. Multiple cross axes is a situation that may occur after the flex-wrap attribute is set to wrap, that is, multiple rows appear in the parent container, and each row has its own axis.

The above is some summary and insights of K on the use of flexible layout methods in implementing responsive layout. Next time, K will continue to discuss with you several other methods of implementing responsive layout.

The above is the detailed content of Introduction to flexible layout of responsive layout. For more information, please follow other related articles on the PHP Chinese website!