A: display: flex layout

display: flex is a layout. I.e. it can be applied to the container, or may be applied to the element rows. A new scheme is proposed by W3C, it can simple, complete and responsive to achieve a variety of page layouts. At present, it has been supported by all browsers.

Flex is a Flexible Box acronym, meaning "elastic layout", to provide maximum flexibility to the box model. After the set Flex layout, sub-element float, clear, and vertical-align attribute will fail.

Two: flex of six properties

the arrangement direction of the container element flex-direction (transverse arrangement default)
. 1: Flex-direction: Row; elements horizontally from left to right so that the spindle

1536039075.png

2: flex-direction: column; so that the vertical spindle elements are arranged vertically from top to bottom

1536039314(1).png

3: flex-direction: row-reverse; a horizontal shaft so that the elements right to left

1536039460(1).png
wrapping the flex-wrap container element (the default does not wrap)
. 1: flex-wrap: nowrap; (default) element does not wrap, such as: a div 100% width, set this property, two div width automatically into each of 50 %;
2: Flex-wrap: wrap; wrap element, for example: a 100% width div, set this property, the second in the second line of div;
justify-content element arranged on the spindle (page) in
1: justify-content: center; centering elements arranged on a spindle (page)

1536041764(1).png

2: justify-content: flex-start; on a spindle element (page) or on start from left

1536041631(1).png

3: justify-content: flex-end; on the spindle element (page) are arranged starting from the right or the lower

1536042053(1).png

4: justify-content: space-between; start element arranged around the top and bottom ends on a spindle or (page)

1536042390(1).png

5: justify-content: space-around; equal intervals on both sides of each element. Therefore, the spacing between elements twice as large than the spacing elements and border.

1536042636(1).png
align-items in the alignment of the spindle element (page) of the current line and the horizontal axis (longitudinal) direction
1: align-items: flex- start; border-side shaft of the starting position of the elastic element cassette (vertical axis) against live side shaft of the starting boundary line (aligned against the upper).

1536043107(1).png

2: align-items: flex-end; border-side shaft of the starting position of the elastic element cassette (vertical axis) against the live-side shaft end of the boundary line. (Lower is aligned)

1536043238(1).png

3: align-items: center; elastic elements centered on top of the box side of the shaft of the row (vertical axis). (Centered)

1536043373(1).png

4: align-items: baseline; box resilient element row side inner shaft and an axis of the same, the value of 'flex-start' equivalent. In other cases, the value will participate baseline alignment. (Aligned against the upper)
align-content element within the elastomeric container is not occupied by the aligned axes intersecting (vertical) in the container when all the available space

<div id="main">
  <div style=""></div>
  <div style=""></div>
  <div style=""></div>
</div>
#main {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: flex-start;
}
#main div {
  width: 70px;
  height: 70px;
}

1：align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。