Some problems and workarounds for flex layout

Objective

Dewdrops recently studied the way flex is laid out, and found that the layout solution presented by the World Wide World is really a tool for an increasingly complex front-end development layout, and has a truly responsive layout on different screens: no longer relying solely on percentages and the strong hard-work of float to achieve design requirements, Show friendly, resilient, and easy-to-maintain code on individual screens. Unfortunately, this man has a fatal flaw----almost all of the browsers on the phone except Chrome are not compatible with it!! , or the degree of support is very different! This is the problem of developers headache, just on the phone to ignore the Internet Explorer This Bandit compatibility problem, another one?! Flex has so many advantages, but it can't be used if the browser is not compatible. Many people will choose to give it up. In the initial face of such a problem I was refused, they said to add compatibility stunts, I said I do not, or absoute layout cool. But! Duang, dew with people do not learn the idea of righteousness, think of Google's products (Chrome, Android, etc.) in the forefront of the status, I believe that the big browser vendors will soon be like the standard to align. So flex is going to learn, but before that we can solve it with an alternative solution. This article will compare the new (FELX) old (flex-box) layouts in two ways. As there is a lot of introduction to flex layout on the Web, this article does not give a detailed introduction to flex, mainly to share the old way (box) to solve the flex mobile compatibility issues. First, let's write a flex example to show some of his attributes.

A small example

A card list on the phone, height 100 pixels, full screen width, left rounded picture (box1), middle three lines, upper and lower card height, middle (box2) Adaptive allocation remaining length, rightmost button (BOX3). We use several boxes to represent the elements of positioning to make this requirement simple. The code for the HTML structure is as follows:

　　

<div class= "box" ><div class= "box1" >red</div><div class= "Box2" ><div class= "Item1" > Green</div><div class= "item2" >blue</div><div class= "Item3" >gray</div></div> <div class= "Box3" >orange</div></div>

The implementation effect is probably the following:

Implementation of general positioning

The idea is this: because to achieve the middle of the box Box2 length to adapt to stretching, the percentage is not possible. So with Box1 and box3 absolute positioning, box2 do not set the width, respectively, set the left margin (box1 width +box1 to the width of the border +box1 to box2 spacing) and the right margin (box3 width +box3 to the outer box width +box3 to box2 spacing) Because all three boxes need to be centered vertically, a percentage padding is set for the outermost box, even so it is difficult to have all the elements vertically centered when the outer frame is highly stretched. Moreover, the height of each box is fixed (not by percentage) and is not the same. So this way can only be as close as possible to the effect, if the outer frame height is unchanged. If you need to center vertically, you can use the table layout, but aren't you going to change the way the whole block is laid out because of one of these centering properties? As for the inside of the three sub-box, it is based on the margin evenly distributed in the Box2, the following is the approximate pseudo-code, not all listed:

. box {position:relative;/* */padding:x% 0;}. box1 {position:absolute;left:10px;}. Box2 {padding-left:box1.width + box1.left + box2.margin-left;/*box2 left inner margin */padding-right:box3.width + box3.right + box2. Margin-right;/*box the right margin of the */}.box2.div{margin-bottom:x%;/*box2 within the element arrangement */}.box3 {position:absolute;/* outer box positioning */right:10px ;/* Outer box positioning */}

The most difficult thing to solve in a normal way is the problem of being highly adaptable, which is the vertical centering of the element at a height fixed. The second is the allocation of the remaining space of the intermediate elements. This is just a very simple example, if you encounter a more complex layout, to be compatible with the adjustment of more than a bit of code can be solved.

Flex Layout Solutions:

Felx uses the elastic layout, when declaring the display property of an element as flex, the browser computes two Tian Shi within the element, and the two axes determine whether the axis is the longitudinal axis or the horizontal axis according to the value of the Flex-direction property. Here, we set the Felx property to box and set its X axis to the spindle. Then let the elements inside are centered on the secondary axis (Y axis vertical axis). In order to set Box2 to allocate the remaining space, we set the Flex property of Box2 to Auto: It means that the expansion and scaling are all on the box2. Then we set the display property of the Box2 to flex, in order to evenly arrange the elements inside, you can set the Box2 's spindle to the Y axis, and then set the Split property on the Y axis: justify-content:space-between; we'll look at the pseudo-code:

. box {display:flex;/* declares the layout method */flex-direction:row;/* the direction of the spindle */justify-content:flex-start;/* the arrangement of the spindle */align-items: center;/* Sub-axis arrangement */}.box2 {flex-direction:column;justify-content:space-between;align-items:flex-start;flex:auto;/* Adaptive Fill Method */}

Simply a few lines of code, the implementation of the general layout took twice times the amount of code to complete the demand. And no matter how wide the height of the width changes, the elements inside the arrangement has been neat. Of course, the complexity of the layout to eliminate not only the amount of code, but also maintenance costs, such as a series of overhead. That's the advantage of flex. But the fatal flaw is about to be exposed and viewed on the phone, but another ghost appears (in a completely disordered order). This makes the dew very disappointed and disappointed. The ecstatic bright vanished immediately. Below we will look for compatible solutions.

Compatible version of the box layout

As the dew knows, the box layout is the predecessor of Flex, the solution for the older generation. The standard is already listed in the list. In other words, it can be supported by various browsers as long as the prefix is added. Let's use this method to be compatible with the mobile browser.

. box{    Display:-webkit-box;/* layout method equivalent to display:flex*/-webkit-box-align:center;/*box alignment align-items:center;*/} . box2{display:-webkit-box;-webkit-box-orient:vertical;/* arrangement flex-direction:column*/-webkit-box-pack:justify;/* The longitudinal arrangement of Box2 is justify-content:space-between;*/-webkit-box-flex:1; Scaling ratio of/*box2 flex:auto;*/}

The above code is the old version of the compatible wording, although it is old, but is compatible with various browsers. By testing, styles and permutations are normal on Chrome, Android, and iOS. So far, we've done a little sample of compatibility!

Summary

This is the current dew on the use of flex on some of the compatibility issues encountered and solutions. In fact, the situation encountered in the implementation process is more complex than here. The dew also learned the box layout with the help of flex, and found that the box layout had already been widely used abroad, and we were completely unaware. Every thought and this, all perpendicular the chest, squatting Duzu ah. At the same time, Hope dew This article will inspire you to learn the new layout of the power of technology. On the front side of the road, even if the position is still backward.

Reference documents

Introduction to Elasticity and models

Flex Layout Tutorial

W3cscholl Box Tutorial Reference Manual

Some problems and workarounds for flex layout