preface

The traditional solution to layout, based on the box model, relies on the display property + position property + float property. It is very inconvenient for special layouts, such as vertical center, which is not easy to implement. In 2009, the W3C introduced a new approach, Flex Layout, that enables easy, complete, and responsive implementation of various page layouts. It is currently supported by all browsers.

The basic concept

Flex, short for Flexible Box, is used to provide maximum flexibility for boxed models. Any container can be specified as a Flex layout. Elements with a Flex layout are called Flex containers, or containers for short. All of its child elements automatically become container members and are called Flex items, or “items.”

The container has two axes by default: a horizontal spindle (main axis) and vertical cross axes (cross axis). The starting position of the spindle (where it intersects with the border) is calledmain startThe end position is calledmain end; The starting position of the intersecting axis is calledcross startThe end position is calledcross end. By default, items are arranged along the main axis. The main axis space occupied by a single project is calledmain sizeThe space occupied by the intersecting axes is calledcross size.



Note:

  1. Flexbox layouts are best suited for applications with components and small-scale layouts, whileGirdLayouts are suitable for larger scale layouts.
  2. After setting to Flex layout, the child elementfloat,clearandvertical-alignAttribute will be invalidated.
  3. Flex layouts are designed to accommodate all types of display devices and screen sizes
  4. Flexbox layouts are directional independent and differ from regular layouts (blockandinline)

Container properties (6)

The following six properties are set on the container

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

1. The flex – direction attribute

The flex-direction attribute determines the direction of the main axis (that is, the alignment of items).

2. The flex – wrap attributes

By default, projects are arranged on a line (also known as an “axis”). The flex-wrap property defines how to wrap a line if an axis does not fit.

3. The flex – flow properties

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
Copy the code

4. The justify – content attribute

justify-contentProperty defines the alignment of items on the main axis.

5. The align – the items property

The align-items property defines how items are aligned on the cross axis.

The align – content attribute

The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.

Project attributes

The following six properties are set on the project

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

1. The order of attributes

orderProperty defines the order in which items are sorted. The smaller the value is, the more advanced it is. The default value is 0.

2. The flex – turns properties

The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space. If all projects have a flex-Grow attribute of 1, they divide the remaining space equally, if any. If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items.

3. The flex – the shrink properties

The Flex-shrink attribute defines the scale by which a project shrinks. The default is 1, that is, if there is insufficient space, the project shrinks. If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient. Negative values have no effect on this property.

4. The flex – the basis properties

The Flex-basis property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

.item {
  flex-basis: <length> | auto; /* default auto */
}
Copy the code

It can be set to the same value as the width or height attribute (such as 350px), and the project will take up a fixed space.

5. The flex properties

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional. It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values. Quick values for this property: auto (1 1 auto), None (0 0 auto), and initial (0 1 auto)

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]}Copy the code

Flex: 1; ===flex: 1 1 arbitrary number + arbitrary length unit; Flex-basis calculates whether the item has extra space before assigning extra space to the first two attributes. The default value is Auto, which is the size of the item itself, so that the three boxes are scaled up and down in proportion to the size of their content.

6. The align – self properties

The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

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





Reference Documents:www.ruanyifeng.com/blog/2015/0…