Flex layout tutorial

I often used flex layout before, but recently I saw someone else using it, I found that I still did not understand this, and re-read the http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html.

I. What is the flex layout?

Flex, short for flexible box, is used to provide great flexibility for the box model.

All containers can be specified as flex la S.

.box{  display: flex;}

The Row Element can also be

.box{  display:inline- flex;}

For a WebKit kernel browser, add-webkitPrefix

.box{  display: -webkit-flex; /* Safari */  display: flex;}

PS: After the layout is set to flexfloat,clearAndvertical-alignThe property is invalid.

Ii. Basic Concepts

Elements in a flex layout are called Flex containers ". I will not elaborate on other concepts.

Iii. Container attributes

The following six attributes are set on the container.

flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content

Flex-direction attributes

flex-directionAttributes determine the direction of the spindle (that is, the direction of the project ).

.box {  flex-direction: row | row-reverse | column | column-reverse;}

Row (default): the spindle is horizontal and the start point is left. Row-reverse: the spindle is in the horizontal direction and the start point is in the right end. Column: the spindle is vertical, and the start point is in the upper edge. Column-reverse: the spindle is vertical and the start point is in the bottom edge.

Flex-wrap attributes

. Box {flex-wrap: nowrap | wrap-reverse;} nowrap (default): Do not wrap: Wrap, the first line is above. Wrap-reverse: line feed. The first line is below.

Flex-Flow

The Flex-flow attribute is short for the Flex-ction attribute and the Flex-wrap attribute. The default value is row nowrap .. Box {flex-flow: <flex-direction >||< flex-wrap> ;}

Justify-Content Attributes

.box {  justify-content: flex-start | flex-end | center | space-between | space-around;}

• flex-start(Default): Left alignment
• flex-end: Right-aligned
• center: Center
• space-between: The two ends are aligned, and the interval between projects is equal.
• space-around: The two sides of each project are separated equally. Therefore, the interval between projects is twice the interval between projects and borders.

Align-items attributes

.box {  align-items: flex-start | flex-end | center | baseline | stretch;}

• flex-start: The starting point of the cross axis.
• flex-end: The end point of the cross axis is aligned.
• center: The midpoint of the cross axis.
• baseline: Baseline alignment of the first line of text of the project.
• stretch(Default): If the height is not set for the project or set to Auto, the height of the entire container is fully occupied.

Align-Content Attributes

PS:align-contentAttribute defines the alignment of Multiple Axes. This attribute does not work if the project has only one axis. (Same as above)

.box {  align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

• flex-start: Align with the starting point of the cross axis.
• flex-end: Align with the end point of the cross axis.
• center: Align with the midpoint of the cross axis.
• space-between: Alignment with the two ends of the cross axis. The interval between the two ends of the cross axis is evenly distributed.
• space-around: The intervals on both sides of each axis are equal. Therefore, the interval between axes is twice the interval between axes and borders.
• stretch(Default): The axis occupies the entire cross axis.

　Project attributes (on the child element)

orderflex-growflex-shrinkflex-basisflexalign-self

Order attribute

PS:orderProperties define the order of projects. The smaller the value, the higher the order is. The default value is 0.

.item {  order: <integer>;}

Flex attributes

flexAttribute isflex-grow,flex-shrinkAndflex-basisThe default value is0 1 auto. The last two attributes are optional.

.item {  flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ]}

This attribute has two shortcut values:auto(1 1 auto) And none (0 0 auto).

We recommend that you use this attribute first, instead of writing three separate attributes, because the browser calculates the relevant values.

Css3 flex attributes: Flex-grow, flex-shrink, and flex-Basis Study Notes
I have recently studied flex in css3. I encountered flex: 1; this one is very tangled. Flex-grow, flex-shrink, and flex-basis are always confused. I have collected a lot of introductions, it should be clear. Most of the explanations on the Internet are that flex-grow is an extended ratio. Flex-shrink is a shrinkage ratio. the Flex-basis scaling reference value assumes that the parent width of the Flex box is fixed to 800px; flex-grow, flex-shrink, and flex-basis are the write splitting modes of flex attributes. For example. box {flex: 4 3 100px;} equals. box {flex-grow: 4; flex-shrink: 3; flex-basis: 100px ;} see the following example <Div class = "flex-parent"> <Div class = "flex-Son"> </div> <Div class = "flex-Son"> </Div> <Div class = "flex-Son"> </div> <style type = "text/CSS">. flex-parent {width: 800px ;}</style>First caseFlex-parent is the parent level, and its width is fixed to 800px, which will not be changed; start to set the sub-level flex attribute; <style type = "text/CSS">. flex-Son: Nth-Child (1) {flex: 3 1 200px ;}. flex-Son: Nth-child (2) {flex: 2 2 300px ;}. flex-Son: Nth-child (3) {flex: 1 3 500px ;}</style> the sum of flex-basis is 1000px; so 1000px> 800px (parent-Level Width); The child element is bound to be compressed; 200px is exceeded; son1 = (Flex-shrink) * flex-basis; son2 = (Flex-shrink) * flex-basis ;..... Sonn = (Flex-shrink) * flex-basis; if the sum of flex-basis is greater than the parent width, the child is compressed, the final choice is Flex-shrink to compress and calculate the weighted value = son1 + son2 + .... + Sonn; the computation formula after compression is W = (Flex-basis value * (Flex-shrink)/weighted value of the sub-element) * Because of the overflow value, the final weighted value is 1*200 + 2*300 + 3*500 = the extended amount of 2300pxson1: (200*1/2300) * 200, that is, approximately 17px; son2 Extension: (300*2/2300) * 200, that is, approximately 52px; son3 Extension: (500*3/2300) * 200, that is, approximately 130px; finally, son1, son2, son3, the actual width is: 200-16 = 184px; 300-52 = 248px; 500-130 = 370px;Case 2The above example shows that we can continue with the second example. In the same example above, we change the parent width to pixel PX, and the sum of flex-basis to 1000px, which is smaller than the parent width, there will be a surplus width of PX; since there is surplus, we do not need to calculate the weight, the remaining width will be calculated based on the Flex-grow, the sum is worth the percentage, then, 200px will allocate the remaining space based on the ratio of the number of parts. The remaining Width W = (the Flex-grow value of the sub-element/The total of all the sub-elements flex-grow) * The total number of remaining values is total = 1 + 2 + 3; son1 Extension: (3/total) * 200, that is, approximately 100px; son2 Extension: (2/total) * 200, that is, approximately 67px; son3 Extension: (1/total) * 200, that is, approximately 33px; finally, son1, son2, and son3, the actual width is: 200 + 100 = 300px; 300 + 67 = pixel PX; 500 + 33 = 533 Px; In conclusion, the second flex-basis and flex-shrink are not included in the formula, and the first flex-grow is not included in the formula, the above two cases are summarized, but most of the time our parent level is not fixed, so what should we do? It's actually very simple. Compare with the above formula, the premise is that the Flex-basis element has been set. If the random value of the width is smaller than that of the Flex-basis element, the first option is used. If the random value of the width is smaller than that of the Flex-basis element, the second option is used. However, in reality, some of our sub-elements do not want to perform proportional allocation, which is always fixed, so flex must be set to none; otherwise, the configured width will be invalid; flex: 1, the calculated value is Flex: 1 0%; flex: Auto, the calculated value is Flex: 1 auto; flex: none, the calculated value is Flex: 0 0 auto; according to the above formula flex: 1, the first method is actually invalid, because the weighted value is 0, so it can only be calculated in the second way; flex: when none is used, both of them are invalid. If your element is not involved in the parent-level surplus allocation or overflow allocation, there are still many scenarios for flex: none;

 

PS: The rest of the property will not talk about, you can go to http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

 

Flex layout tutorial