flex elastic layout usage notes

(Note for the present reference lookup)

display: flex Introduction

  The property must be elastic layout, so change the layout of vertical cross-elasticity of the reason why powerful and flexible, because it breaks a lot of old rules. Any element can be set to elastic layouts, elastic layouts will have an impact on its internal child elements:

1. Block elements are no longer a single line (which is unidimensional).
2. If the block elements not explicitly predetermined width, the parent element is not covered laterally.
3. float, clear, and vertical-align property will fail.
4. Defined display on the parent element: flex; then the child belongs to the elastic layout.

1.flex-direction: row | row-reverse | column | column-reverse | initial | inherit (box arrangement direction)

(1) row: default value, the spindle is horizontal, the starting position to the left, left to right item.
(2) row-reverse: the main shaft is horizontal, in the right starting position, project from right to left.
(3) column: a vertical spindle, the start position at the top item displayed vertically, from top to bottom.
(4) column-reverse: the spindle is vertical, starting at the bottom position, projects vertically displayed, from bottom to top.

Code:

		/*flex-direction: row;*/
		#main1{
			width:400px;
			display:flex;
			flex-direction: row;
			background: #ccc;
		}
		#main1 div{
			width:50px;
			height:50px;
		}
		/*flex-direction: row-reverse;*/
		#main2{
			width:400px;
			display:flex;
			flex-direction: row-reverse;
			background: #ccc;
		}

		#main2 div{
			width:50px;
			height:50px;
		}

2.flex-wrap: nowrap | wrap | wrap-reverse (split row or column demolition)

  That is, line after line covered.

(1) .nowrap: default value, predetermined items are not removed in the container rows or columns split display.
(2) .wrap: predetermined items demolition container rows or columns displayed automatically removed when needed.
(3) .wrap-reverse: the items in the container a predetermined split line or column displayed automatically removed when needed, but in reverse order.

Code:

        #main2 {
            width: 200px;
            display:flex;
            flex-wrap: wrap;
            background:#ccc;
        }
        #main2 div {
            width: 50px;
            height: 50px;
            text-align:center;
            line-height:50px;
        }

Additional: flex-flow (1,2 written binding)

flex-flow: [flex-direction] [flex-wrap];
This upper bound is written 1,2
flex-direction flex-wrap position they can be written directly to the attribute value 1, 2
codes:

		#main {
			width: 200px;
			display:flex;
			flex-flow:row-reverse wrap;
			background:#ccc;
		}
		#main div {
			width: 50px;
			height: 50px;
			text-align:center;
			line-height:50px;
		}

(And between the project and the space around the main axis direction (default horizontal direction)) space-around | flex-start | flex-end | center | space-between: 3.justify-content

(1) .flex-it start: default value, a predetermined item container in the starting position of the spindle.
(2) .flex-end: the project is located in a predetermined position of the container the spindle end.
(3) .center: project a predetermined intermediate spindle of the container.
(4) .space-between: the two ends are aligned in a predetermined spindle projects.
(5) .space-around: the container sides predetermined items are retained equally spaced.

Code:

		#main1 {
			width: 400px;
			background:#ccc;
			display: flex;
			justify-content:space-between;
		}
		#main1 div {
			width: 70px;
			height: 70px;
			text-align:center;
			line-height:70px;
		}

		#main2 {
			width: 400px;
			background:#ccc;
			display: flex;
			justify-content:center;
		}
		#main2 div {
			width: 70px;
			height: 70px;
			text-align:center;
			line-height:70px;
		}

4.align-items: stretch | center | flex-start | flex-end | baseline (such as the center so that all the sub-element blocks which vertically centered)

(1) .stretch: default layout elastic container will be stretched to fit the container projects in the cross-axis direction.
(2) .center: Elastic predetermined layout container items centered in the cross-axis direction.
(3) .flex-it start: Elastic predetermined layout container in the starting position projects cross-axis alignment.
(4) .flex-end: a predetermined cross-axis item layout elastic end position aligned with the container.
(5) .baseline: Elastic predetermined layout container items aligned with the baseline of the first line of text.

Code:

        #main {
            width: 200px;
            height: 100px;
            background:#ccc;
            display: flex;
            align-items: center;
        }
        #main div {
            width: 70px;
	    	height: 20px;
        }

5.align-content: stretch | center | flex-start | flex-end | space-between | space-around (align-content attribute applies only to flex container multi-line)

With flex-wrap, the better.

(1) .stretch: default value, predetermined line is stretched to accommodate the size of the container cross-axis, where the item will be stretched.
(2) .center: predetermined vessel line intersecting the container axis centered. (3) .flex-it start: a predetermined vessel line intersecting the container axis aligned starting position.
(4) .flex-end: the end of a predetermined line intersecting the container axis aligned with the position of the container.
(5) .space-between: the container specified container rows aligned axes intersecting at both ends, the interval between the rows are equal.
(6) .space-around: every predetermined equal intervals on both sides of the container rows. Therefore, the edges of the container row spacing than the spacing between lines doubled.

Code:

    #main {
        width: 200px;
        height: 300px;
        background:#ccc;
        display: flex;
        flex-wrap: wrap;
        align-content:space-between; 
    }
    #main div {
        width: 50px;
        height: 20px;
    }

<div id="main">
    <div style="background-color:red;">1</div>
    <div style="background-color:coral;">2</div>
    <div style="background-color:yellow;">3</div>
    <div style="background-color:green;">4</div>

    <div style="background-color:red;">1</div>
    <div style="background-color:coral;">2</div>
    <div style="background-color:yellow;">3</div>
    <div style="background-color:green;">4</div>

    <div style="background-color:red;">1</div>
    <div style="background-color:coral;">2</div>
    <div style="background-color:yellow;">3</div>
    <div style="background-color:green;">4</div>
    
    <div style="background-color:red;">1</div>
    <div style="background-color:coral;">2</div>
    <div style="background-color:yellow;">3</div>
    <div style="background-color:green;">4</div>
</div>

6. align-self: auto | stretch | center | flex-start | flex-end | baseline (an internal element differ in the arrangement of the shaft side)

(1) .auto: default attribute values inherited align-items of elastic container, the container is not provided if the elastic align-items, the default value stretch.
(2) .stretch: project a predetermined size to use the container is stretched in the cross shaft.
(3) .center: project a predetermined axis intersecting the row centered.
(4) .flex-it start: start position of a predetermined item in the row are aligned intersecting the axial direction.
(5) .flex-end: project a predetermined axis intersecting the row end position is aligned.
(6) .baseline: provide that the project is aligned in the row in the baseline.

Code:

        #main {
            width: 300px;
            height: 200px;
            background:#ccc;
            display: flex;
            flex-flow: row wrap;
        }
        #main div {
            width: 70px;
            height: 70px;
        }
        #main div:nth-child(2n) {
            align-self: center;
        }

<div id="main">
    <div style="background-color:coral;"></div>
    <div style="background-color:green;"></div>
    <div style="background-color:blue;"></div>
    <div style="background-color:red;"></div>
    <div style="background-color:yellow;"></div>
</div>

In practice a multiple of 2n items block.

Additional 1: difference align-items and align-content

  attribute can align-itemsApply to all vessels of flexIts role is to set default child flex alignment axis at the intersection of each row of the flex.
  align-contentApplies only to multi-line flex container(I.e. child container flex more than the only effect attribute row), its role is to flex when the container when there is extra space in the cross-axis, the sub-item as a whole (attribute value: flex-start , flex-end, center time) are aligned. Effect of different values ​​are as follows

Additional 2: difference align-items and align-self

align-items are used as the parent container (writing style in the style sheet contains the display), then we can set up the whole child with this style. The align-self to act on child container, after setting, only set this CCTV child can have this style.

8.order: number | initial | inherit (to set the share of container location)

(1) .number: The default value is 0. Order provisions flex project (that is, set the position of each color).

        #main {
            width:400px;
            height:150px;
            display:flex;
            background:#ccc;
        }
        #main div{
            width:70px;
            height:70px;
        }
        div#coral{order:2;}
        div#lightblue{order:4;}
        div#lightgreen{order:3;}
        div#pink{order:1;}

<div id="main">
    <div style="background-color:coral;" id="coral">1coral</div>
    <div style="background-color:lightblue;" id="lightblue">2lightblue</div>
    <div style="background-color:lightgreen;" id="lightgreen">3lightgreen</div>
    <div style="background-color:pink;" id="pink">4pink</div>
</div>

9.flex-grow: number (amplification and defaults to 0 does not amplify)

  Enlarged scale flex-grow item attribute definition, the default is 0 i.e. not amplified. If the remaining space of the container is not present, it will not be able to zoom in

(1) .number: a value defaults to zero, for a predetermined enlargement scale of the sub, the contrast ratio and other items to be determined.

Code:

        #main {
            width: 350px;
            height: 100px;
            background:#ccc;
            display: flex;
        }

        #main div{flex-basis:50px;}

        #main div:nth-of-type(1) {flex-grow: 1;}
        #main div:nth-of-type(2) {flex-grow: 3;}
        #main div:nth-of-type(3) {flex-grow: 1;}
        #main div:nth-of-type(4) {flex-grow: 1;}
        #main div:nth-of-type(5) {flex-grow: 1;}

10.flex-shrink: number | initial | inherit (property embodies the elastic layout "Qu" side, so that the project can shrink the size)

This attribute specifies the reduction ratio of the container on the shaft item, the default value is 1.
We need to pay particular attention to the following points:

(1) This property applies to project above the container.
(2) the size of the container on the spindle must be less than the size of the project, reduction possible.
(3) A value of zero indicates reduced portion projects.
(4) must be applied elastic layout environment, otherwise invalid.
(5) number: The default value is 1, the container to search for items with a ratio other items.

Code:

        #main {
            width:350px;
            height:100px;
            background:#ccc;
            display:flex;
        }
        #main div {
            flex-shrink:1;
            flex-basis:100px;
        }
        #main div:nth-of-type(2) {flex-shrink:3;}

11 flex-basis: number | auto (for the project set an initial benchmark size)

  When the flex-basis and width attributes exist, the attribute is not effective width, the width of the width of the flex item set for flex-basis

(1) number: unit of length or percentage, a predetermined length of flex initial project.
(2) auto: default value, a length equal to the length of the flex project itself, if the length of the item is not specified, according to the content of the decision.

Additional 1: flex = 1

flex: flex-grow [] [flex-shrink] [flex-basis] | auto | 1
  This property is a flex-grow, flex-shrink composite writing and flex-basis property. The default attribute value is 0 1 auto. If the element is not a Flex project, this property does not work. Acting on the child.

(1) .auto: 1 1 auto with the same.
(2) .none: 0 0 auto with the same.
(3) 1 0 1 auto default value of the same.

Additional 2: flex compatibility of current

We head straight to a table

we see that, flexbox already compatible with all browsers, you can use flexbox to show his extraordinary talent it!