Several methods for implementing responsive Layout-elastic layout and several methods for Layout

Several methods for implementing responsive Layout-elastic layout and several methods for Layout

The implementation of responsive layout is a great bridge in the front-end project. It is flexible and shapable, so that the same website can show different vigor on different terminal devices. Today, I would like to share with you the opportunity to explore some of the frequently used methods for implementing responsive layout.Elastic Layout.

Elastic layout is very convenient. It only needs to rely on CSS style to implement responsive layout, and K is also the most used method to implement responsive layout. In particular, pages of e-commerce websites or mobile apps similar to a certain treasure or a certain East region can be easily implemented using elastic layout, the following figure shows some pages of a mobile app that uses the auto-layout copy function of K.

 

 

 

 

 

 

 

 

 

 

 

 

As you can see, the elastic layout is very convenient, especially when small icons are arranged or frequently divided. Next, K will take you back to the elastic 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 the elastic layout of its child elements in the parent element,However, it should be noted that the display: flex; style only applies to parent containers and non-Child containers that add this attribute. In other words, the diaplay: flex on the parent container; attributes do not make the child element in its immediate child element have an elastic layout. In general, Dad can only get his son, but not his grandson. If you want to continue to use the elastic layout in the next layer, you can add the display: flex; attribute on the corresponding child element.

The elastic layout has corresponding attributes on the parent and child elements to regulate the "Elasticity" of the child element in the parent element ".

Attributes related to the elastic layout that we often use on the parent element include flex-direction, flex-wrap, justify-content, align-items, align-content, these attributes are normalized by the orientation of the spindle, line feed, the alignment of the project on the spindle, the alignment of the project on the cross axis, and the alignment of the project on the multi-axis line. project elasticity in the parent element.

Attributes related to the elastic layout that we often use on sub-elements include order, flex-grow, flex-shrink, flex-basis, align-self, these attributes regulate the project's elasticity from the project sorting, project zoom-in ratio, project scale-out ratio, project space occupation of the main axis, and the alignment of a single project on the cross axis.

The above several specific attribute values and roles can be found in my blog (http://www.cnblogs.com/wk1102/p/6622738.html), here to tell you a few places I felt at that time more confused.

(1)Spindle and cross axis.In an elastic layout, the direction of the spindle and the spindle depends on the attribute value of the flex-direction attribute. It can be either in the horizontal or vertical direction, which can be positive, it can also be reversed. Here, the friends who first came into contact with this concept should pay attention to it. Do not just put the "main axis" and "Horizontal forward" into the same number, although the default value set in CSS is as follows. The cross axis represents the axis perpendicular to the main axis.

(2)Baseline.The term "baseline" is also mentioned in the flexible layout. Baseline refers to the bottom edge of the letter x. The baseline Alignment Method of many attribute values refers to alignment along the low-end line of small-to-write x in a row, as if there is always a template in the comparison.

(3)Multi-axis.Multi-axis is a possible situation after the flex-wrap attribute is set to wrap, that is, multi-row arrangement occurs in the parent container, each row has its own axis.

 

The above are some small summaries and insights K has made in implementing the elastic Layout Method in responsive layout. Next time, K will continue to discuss with you several other methods for implementing responsive layout.