CSS3-flex stretch layout

Outline

In CSS3 layout has done a great improvement, adding a scalable layout arrangement will become block-level elements of the layout by the layout developer is very flexible and its powerful scalability, to play in the opening and the great response role.

The CSS style element in the specified displayproperty is set flex, the layout of the element is a telescopic container, inside which child elements are arranged horizontally from left to right (like floating effect).

A simple example:

.box {
  width: 800px;
  /* 设置父级盒子为 flex */
  display: flex;
  background-color: deepskyblue;
}

.box div {
  width: 100px;
  height: 100px;
  margin: 5px;
  border: 1px solid red;
}

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

When the layout is set flex element, the element will have a sub-side shaft and the spindle

• Spindle: used to configure Flex project, the default is the horizontal direction, from left to right

• Side axis: the axis perpendicular to the spindle axis side is referred to, the default is the vertical direction, from top to bottom

Modify the spindle direction

Side shaft axis and arranged to determine the direction of sub-elements, the alignment of the spindle and the side of the shaft is not fixed, it can flex-directionbe modified properties.

flex-direction The property value:

• row: Major axis direction horizontally to the right, the sub-elements are arranged from left to right, the default value
• column: Vertically downward direction of the main shaft, the sub-elements are arranged from top to bottom
  
• row-reverse: Major axis direction horizontally to the left, from right to left child elements arrayed
  
• column-reverse: Major axis direction is a vertical direction, the sub-elements are arranged from bottom to top
  

Spindle Alignment

By justify-contentproperty sub-elements may be provided on the spindle alignment; as its paragraph of the text (left justification, right justification, justification, etc.)

justify-content The property value:

• flex-start Child element to the starting point of the spindle alignment, the default alignment
• flex-end Child elements aligned to the end of the spindle
  
• center Sub-elements are aligned in the intermediate position of the spindle
  
• space-around Child elements evenly distributed on the spindle (average major axis direction of all child elements remaining empty space)
  
• space-between A spindle attached to the first starting point, a spindle attached to the end of the last; other child elements are uniformly distributed, ensuring a gap between each box are equal (average major axis direction intermediate sub-element remaining empty space).