On the flex layout of display properties in CSS3

Recently in the study of small programs, in the design of the home page layout, the new understanding of a layout way Display:flex

. container {  display: flex; flex-direction: column; align-items: Center;  Background-color: #b3d4db;  6}        

After compiling the effect is obvious, the layout of the interface is also very reasonable, looks very clear. So what exactly does this attribute do?

　　Flex is the abbreviation for flexible box, meaning "resilient layout", which provides maximum flexibility for box-shaped models. When set to flex layout, the, and attributes of the child elements float clear vertical-align are invalidated.

It can be applied to a container, or it can be applied to inline elements. (explained in conjunction with developer tools) in 2009, the website presented a new solution----flex layout that enables easy, complete and responsive layout of various pages. Currently, it has been supported by all browsers, which means that this feature is now safe to use.

Basic concepts

Elements that use flex layouts, called Flex container, are referred to as "containers." All of its child elements automatically become container members, known as Flex items (Flex Item), or "project" for short. The container has two axes by default: the horizontal spindle (main axis) and the vertical intersection axis (cross axis). The starting position of the spindle (the intersection with the border) is called main start , the end position is called main end ; the start position of the intersection axis is called cross start , the end position is called cross end . The project is arranged by default along the spindle. The main spindle space occupied by a single item is called the main size occupied cross-axis space cross size .

The following 6 properties are set on a container:

• • Flex-direction the arrangement of items within a container (default horizontal arrangement)
  • Flex-wrap item wrapping method in container
  • Flex-flow more than two properties of a shortcut
  • Alignment of the Justify-content project on the spindle
  • Align-items How the item is aligned on the cross axis
  • Align-content defines the alignment of multiple axes. If the item has only one axis, this property does not work.

Flex-direction

1 . Box { 2 flex-direction: row | row-reverse | column | column-reverse; 3}

The range of attribute optional values is row (the default) is left-to-right along the horizontal spindle, Row-reverse is arranged from right to left along the horizontal spindle, and column is along the vertical spindle right up to the bottom and column-reverse.

Flex-wrap 1 . box{ 2 flex-wrap: nowrap | wrap | wrap-reverse; 3}

The range of optional values for the property is nowrap (default) without wrapping, wrap wrapping (first row above) and Wrap-reverse (you know ~)

Flex-flow

1 . Box { 2 flex-flow: <flex-direction> | | <flex-wrap>; 3}

The values of the above two methods are used in the notation property | | Connection can be

Justify-content

1 . Box { 2 justify-content: flex-start | flex-end | center | space-between | space-around; 3}

The alignment of the project on the spindle (which axis of the spindle depends on the setting of the property flex-direction)

Flex-start: Arranged on the spindle from left or top

Flex-end: Arranged on the spindle from right or bottom

Center: centering on the spindle

Space-between: Starting at the left or right or upper and lower ends of the spindle

Space-around: The intervals on each side of the item are equal. Therefore, the interval between items is one times larger than the interval between items and borders.

Align-items

1 . Box { 2 align-items: flex-start | flex-end | center | baseline | stretch; 3}

Here, the direct film illustrates the clearer

align-content

1 . Box { 2 align-content: flex-start | flex-end | center | space-between | space-around | stretc H 3}

The above describes the properties of the container, the following is the properties of the items in the container:

• • order　　项目的排列顺序。数值越小，排列越靠前，默认为0。
  • flex-grow　　项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  • flex-shrink　　项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  • flex-basis　　在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
  • flex　　是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
  • align-self　　允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

On the flex layout of display properties in CSS3