With the interviewer pulled flex elasticity of CSS layout and a half hours, and all here. [You can read a more thorough]

1. CSS3 box model weird

Before said flex layout, again look weird box model of CSS3.

（1）

The total size = standard box model width/height+padding+border+margin;

Weird = total size box model width/height+margin.

(2) box-sizingProperties:

• Can be specified to a box-sizing property attribute value attribute value represents a content-box standard box model, the specified attribute value represents the border-box box model weird.
• content-box: drawing elements within margins and borders outside width and height.
• border-box: any padding and border are specified elements are drawn in the set width and height.
  weird lower box model version = IE = border-box box model
  

(3) Why use box-sizing property:

• The purpose of the overall width of the control element, if the property is not used, the default style using the content-box attribute value (the standard box model), it is only done for a given width of the content, but not the elements of total width specified.
• Using the border-box property values ​​in some cases will make the page layout more convenient.

2. flex basic concepts

• Flex is a Flexible Box acronym, meaning "elastic layout", to provide maximum flexibility to the box model.
• Any container can be specified as Flex layout.

.box{display: flex;}

• Inline elements can also be used Flex layout.

.box{
  display: inline-flex;    /* 将对象作为内联块级弹性伸缩盒显示 */
}

• Distribution box model for the elastic element decided how to handle the box and the box space available. By box model, designers can easily create layouts adaptive elastic flow layout of the browser window or adaptive fonts.
• flex syntax is 2012, most browsers have implemented no prefix version.
• Webkit core browser, you must add -webkit-the prefix.

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

注意: After the set Flex layout, sub-element float, clear, and vertical-align attribute will fail.

• Elemental flex layout, become flex container, all the elements of his child automatically becomes a member of a container, called a container project.
  

• Default container exists two axes: 水平的主轴（main axis）and 垂直交叉轴（cross axis）the start position of the spindle (intersection with border) is called. main start, Referred to the end position main end; start position is called the cross-axis cross start, called the far end of cross endthe project. 默认沿主轴排列. A single project called the space occupied by the spindle main size, called the cross-axis occupied cross size.

3. elastic layout properties

(1) flex-directiona direction determined properties spindle (i.e., the arrangement direction of the project):

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

• Row(默认值): The spindle is horizontal, the starting point at the left end.
• Row-reverse: Horizontal axis, the starting point at the right end.
• Column: Spindle vertical direction, the starting point on the edge.
• Column-reverse: Spindle in a vertical direction along the lower starting point.

(2) Justify-contentProperties: defines project on the spindle alignment:

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

• flex-startDefault: Left
• flex-end: Align Right
• Center: Center
• Space-between : Justify, the spacing between the items are equal
• Space-around: Equal intervals on both sides of each item.
• Therefore, the gap between the project twice the size of the project and the interval of the border.
  

(3) align-itemsattribute defines how the items are aligned in the cross-axis:

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

(4) Flex-wrapProperties:

.box{
	flex-wrap:nowrap | wrap | wrap-reverse;
}

①nowrap: default, without changing the number

②wrap: line feed, above the first row

③wrap-reverse

(5) align-contentProperties:

align-content attribute defines the 多根轴线alignment. If the project is only one axis, the property does not work.

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

• flex-start: The starting point is aligned with the cross shaft.
• flex-end: Aligned with the end of the cross shaft.
• center: Aligned with the midpoint of the cross shaft.
• space-between: Both ends of the cross-axis alignment, the average spacing between the axes of the distribution.
• space-around: Each spaced sides of axis are equal. Therefore, the spacing between the axes twice the size of the interval axis border.
• stretch（默认值）: Axis occupies the entire cross-axis.

(6) align-selfProperties:

align-self attribute allows a single item with other items has a different alignment, may cover the align-items property. The default value is auto, indicating inheritance of the parent element align-items attributes, if no parent, is equivalent to the stretch.

.item {  align-self: auto | flex-start | flex-end | center | baseline | stretch;  }

(7) orderattribute;

The order attribute definition items. The smaller the value, the more forward arrangement, the default is 0.

.item {
  order: <num>;
}

(8) flex-growProperties:

Enlarged scale flex-grow item attribute definition, the default is 0, i.e., if there is free space, not enlarged.

.item {
	  flex-grow: <number>;
}

• If the flex-grow attributes of all items are 1, they will aliquots remaining space (if any).
• flex-grow property if a project is 2, other projects are 1, then the remaining space is occupied by the former than the other items more than doubled.
  

(9) flex-shrinkproperties:

flex-shrink attribute defines the reduced scale of the project, the default is 1, that is, if space is insufficient, the project will be reduced.

.item {flex-shrink: <number>;}

• If the flex-shrink attribute all items are 1, when the lack of space, will be scaled down.
• flex-shrink property if a project is zero, other projects are 1, when the lack of space, the former does not shrink.
• Invalid negative value of the property.
  

(10) flex-basisProperties:

flex-basis attribute defines the spindle space before allocating extra space, occupied by the project (main size). Browser Based on this property, calculate the spindle if there is extra space. The default is auto, that the original size of the project.

.item {
  flex-basis: <length> | auto; 
}

It can be set with the same width or height attribute values ​​(such as 350px), the project will occupy a fixed space.

(11) flexattributes:

• flex properties are flex-grow, flex-shrink and flex-basis shorthand, the default value 0 1 auto. After two optional attributes.
• This property has two quick values: auto (1 1 auto) and none (0 0 auto).
• It recommended that priority use of this property, rather than write a separate three separate properties, because the browser will calculate the correlation value.

(12) flex flexible space defined box:

①flex composite properties. How to set or retrieve the flexible pouch model object sub-element allocated space.

② the flexible pouch using the adaptive window layout:

• The layout of the cartridge can be elastically changed by the layout setting box flex
• Let all the flexible pouch model object of sub-elements have the same length, content to ignore their internal

  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;最新语法

4. CSS3 multi-column

Multi-column properties:

• column-count: Num columns columns
• column-width: Column Width px (necessary attributes)
• column-gap: Distance px section
• column-rule: Column px width style color line spacing
• column-span: Property all across columns

• Opera and Internet Explorer 10 support column-rule property.
• Firefox supports an alternative -moz-column-rule property.
• Safari and Chrome support alternative -webkit-column-rule property.
• Notes: Internet Explorer 9 and earlier versions of the browser does not support column-rule property.

5. Responsive

(1) 固定布局: in pixels as a basic unit of the page, regardless of the width of the browser screen of the device and only the size of a design;
(2) 可切换的固定布局: the same as the page in pixels units, with reference to the main device size, design layout sets of different widths. By the screen size or the width of the browser to identify, select the most suitable set of layout width;
(3) 弹性布局: percentage of pages as the basic unit, the device can be adapted to all the width of the browser and screen size in a certain range, and the use of perfect space available to show the best effect;
(4) 混合布局: similar to the layout elasticity, can adapt to the width of the browser screen of the device and of all sizes within a certain range, and effective use of space can perfectly show the best results; just mixed pixels, two kinds of percentages, and unit as page units.
(5) 布局响应: pages responsive to achieve the design, layout design required for different widths of the same content, there are two ways: pc Priority (starting from the pc-down design); preferentially moved (upward from the mobile terminal design) ;

• Regardless of the kind of pattern-based design, to be compatible with all devices inevitably need to make some changes (the critical point of the layout change occurs is referred to as breakpoint) in response to the module layout when the layout;

• Advantages responsive layout:
  ① face different resolution of the device flexibility strong
  ② can quickly resolve multi-device display adaptation

• Responsive layout disadvantages:
  ③ compatible with various devices workload, low efficiency
  ④ cumbersome codes, hidden elements appear useless, longer load time