CSS3 Telescopic Box Flexible box

This is a new layout, on the mobile side is very practical, ie on this layout of the relevant compatibility is not very good, Firefox, Chrome, Safrai, etc. need to add browser prefix.

Let's talk about the features of this layout:

1) Mobile Because the screen width is not the same, in the layout of the time in order to fit, if used as a percentage, you have to calculate accurately, and if there is a 1px frame, the calculation will be more complex and difficult to control

2) If you have more than one column, you have to make all the columns the same height, before you need to use a variety of calculations or with sub-elements to support high

3) Upper and lower center, if it is in the past, then use line-height or top absolute positioning and other calculations

4) Form layout, often left and right on one line, used to set float or position with margin-left combination layout

5) Web pages sometimes have a bottom, put some contact links, etc., this bottom should always be below, even if there is no content, do not move up, the past is to give the middle of a higher

Now, with a few properties of flexible box, you can do the above-mentioned high-difficulty action.

There is an online Flexbox game that you can play with, called Flexboxfroggy. The rule is simple, which is to match the color of the frog with the lotus leaf.

I. Old and new grammar

1) Several basic concepts

1. Flex container (Elastic container), the main setting display is Flex or-webkit-flex, then the child element in this container is elastic.

2. Flex item (Elastic child element), size can be set by normal width or height, or by using advanced Flex properties to customize the allocation space.

3. Main axis (spindle or transverse) and cross axis (side or longitudinal axis), where properties flex-direction, Justify-content, Align-items, align-self control the direction or alignment of the axis.

4. The Flex-wrap property controls the wrapping of elastic child elements.

5. There is an order attribute, with integer values to define the order of arrangement, the number of small rows in front.

2) comparison of old and new attributes

Old syntax	New syntax

Legacy Partial Property Compatibility:

New section Property Compatibility:

3) The old and new properties correspond

Old Properties	New properties	Define or contrast
Box-orient Box-direction	Flex-direction	Box-orient:horizontal + Box-direction:normal = Flex-direction:row Box-orient:horizontal + Box-direction:reverse = Flex-direction:row-reverse box-orient:vertical + Box-direction:normal = Flex-direction:column Box-orient:horizontal + Box-direction:reverse = Flex-direction:column-reverse
Box-flex	Flex	Flex has 3 sub-attributes, and Box-flex can only set a number
Box-align	Align-items Align-content	The differences between Align-items and Align-content are analyzed below
Box-pack	Justify-content	Same effect
Box-ordinal-group	Order	Same effect
Box-lines (Experimental properties)	Flex-wrap	Same effect (Android UC and browser does not have a line-wrapping effect)
Box-flex-group		Sets or retrieves the owning group of child elements of a telescopic box object
	Flex-grow	Flex Sub-Properties, setting or retrieving the expansion ratio of the elastic box
	Flex-shrink	Flex Sub-Properties, setting or retrieving the shrink ratio of the flex box
	Flex-basis	Flex Sub-Properties, setting or retrieving elastic box scaling datum values
	Flex-flow	Flex-direction and Flex-wrap compound properties, setting or retrieving the arrangement of child elements of a flexible box model object
	Align-self	To define the alignment of a flex subkey individually in the direction of the side axis (vertical axis)

4) The difference between align-content and Align-items

Look at the picture below, the left is align-content, the right is Align-items (online code click here, open with chrome)

Align-content only in multiple lines when the effect will appear, if only one row will not have effect, you can modify the online code to see the effect. This property is similar to the Justify-content property on the spindle alignment (UC and browser on Android do not show flex-wrap effects)

Align-items in multiple lines, the two columns are not considered as a whole, but in a row, the effect is very good. Align-self modifies the effect of the parent align-items.

5) child element Space calculation method

New syntax Flex, which includes flex-grow expansion ratios, flex-shrink shrinkage ratios, and flex-basis starting values. The compatibility of these two properties is not very good, the UC browser is not available.

In two cases:

1. The width of the container > The sum of the child elements, view the online source code.

The width of the container is set to the 500px,flex-basis child element starting width 50px, 80px, 100px respectively.

. Flex Li:nth-child (1) {  flex:1 1 50px;  background:red;}. Flex Li:nth-child (2) {  flex:2 2 80px;  Background:blue;}. Flex Li:nth-child (3) {  flex:3 3 100px;  Background:black;}

Calculate the remaining space at 270px, using Flex-grow.

Final width = flex-grow/flex-grow sum * remaining space + flex-basis

child element 1 = (1/(1+2+3)) * 270 + 50 = 95

child element 2 = (2/(1+2+3)) * 270 + 80 = 170

child element 3 = (3/(1+2+3)) * 270 + 100 = 235

2. The width of the container < The sum of the child elements, view the online source code.

The container's width is set to the 110px,flex-basis child element's property and the same as above.

The overflow value of 120px is calculated first, and then the contraction sum is computed according to the shrinkage ratio 1*50 + 2*80 + 3*100 = 510px.

Final width ≈flex-basis-(shrinkage ratio * flex-basis)/contraction sum * overflow value

child element 1 = 50-(1*50/510) * 120≈38.23

child element 2 = 80-(2*80/510) * 120≈42.35

child element 3 = 100-(3*100/510) * 120≈29.40

6) spindle and side shaft

These two axes look like x and Y coordinates, but a little bit different is that the XY position will not change and the x axis will not become the Y axis.

The position of the spindle and the side axis also changes after the arrangement is arranged by flex-direction or box-orient. As shown in the following:

When doing justify-content or align-items alignment, pay attention to the position of the reference axis.

For example, I want to do a vertical center operation, I will set the Align-items:center, in the first spindle and the side axis, you can do the desired effect.

However, the horizontal centering effect is shown in the second spindle and the side axis, because the align-items is aligned according to the lateral axis (cross axis).

7)-webkit-box is slightly different from flex

Many places on the internet just say that these two are only grammatical differences, but in the actual project, encountered can only use-webkit-box to achieve their desired effect.

For example, I want to implement an ellipsis in the flex layout that exceeds the text display, and view the online code. -webkit-line-clamp This attribute must be used in conjunction with-webkit-box.

. flex {  width:200px;  Display:-webkit-box;  /*display:flex;*/  -webkit-box-orient:vertical;  -webkit-line-clamp:1;/* limit the number of lines of text displayed in a block element */  Overflow:hidden;  Text-overflow:ellipsis;}

There should be other differences, I haven't noticed yet.

Third, practical application

1) Simple grid system

There is a grid system in bootstrap2.3.2, which produces a raster effect with a percentage or px in combination with float, and is responsive with more than 300 lines of CSS code.

The flex layout is inherently responsive, which saves a lot of code and looks at the online code.

2) Multi-column equal height

And so on the question in the foreign country called "Holy Grail Layout", the name is quite tall on, the content a lot.

There are a number of ways to see this "eight creation and other high-column layouts", and there are pros and cons to it, either way, but you need some code to implement it.

and Flex layout, set Display=flex, each child element again set space, their height can automatically adjust to the same, view the online source code.

3) Absolute Bottom

On the Web page, sometimes the bottom of the column needs to be posted below, such as links to the information, and if the middle content is not, it will collapse up.

In the absence of content in the time to come up, although you can set a height in the content area by default, but the bottom is not exactly right on the top of the screen, unless the exact calculation.

Foreign pipe This is called "Sticky Footer"

As long as the flex-direction:column direction is set in the flex layout, then the height of the container is the same as the screen or higher, so that the child elements at the bottom are stuck below.

View the online code. More information can be found in "Solved by Flexbox", where GitHub addresses. There is also a flexbugs can refer to reference.

Iv. Points of attention

1) The Column-* property in multi-column layouts is not valid for elastic sub-elements, which is also a flexible layout, but effective scenarios are relatively simple

For example, waterfall photo Wall (shown), requires elastic content with only one img tag

2) Once there is a scene (shown), Flex layout can be high, but when used:: After setting a hook, will appear: After the content of the height or original, resulting in dislocation.

Click here to view the details.

3) float and clear are not valid for elastic child elements.

4) Invalid alignment of vertical-align to elastic sub-elements

CSS3 Telescopic Box Flexible box