Proficient in Flex flex layout

In the ancient days of ie6 compatible float, position+display layouts, there were often some weird layout problems, so the FLEX layout in CSS3 was born, that is, flexible layout.

I. Compatibility

Flex layout is now fully supported by over 98% of browsers (unless you are working on an ancient project), so almost everyone can use flex layout.

Two, pay attention to the main points

If the Flex layout is used, the following attributes in the container’s neutron elements are invalidated: float, clear, and vertical-align;

As shown, without Flex before:



After using Flex:

Third, basic theory

When the container property is set todisplay:flexAfter that, all child elements in the container are automatically addedThe flex project, that is,flex-item, commonly known as theproject. The container has two axes by default, horizontalThe spindleAnd the verticalCross shaftBy default, items are sorted along the main axis, items occupyThe spindleAccording to spacemain-size, the project occupiesCross shaftThe space of the saidcross-sizeAs shown in figure:

The container has six attributes

Flex-direction, flex-wrap, flex-flow, justity-content, align-items, align-content;

4.1,flex-directionProperty is the direction in which the spindle layout is arranged4Attribute values, as follows:

flex-direction: row;——- Default, horizontal, left-aligned;

flex-direction: row-reverse;— Horizontal, aligned to the right;

flex-direction: column;—– vertical, aligned downward;

flex-direction: column-reverse;– Vertical and aligned upwards



4.2,flex-wrapThe property is the main axis determines whether the item (box) is newline, there is3Attribute values, as follows:

flex-wrap: nowrap;Default value, forcing no line breaks;



flex-wrap: wrap;Overflow newline, pressOrder lineArrangement;



flex-wrap: row-reverse;Overflow newline, pressReverse order lineArrangement;



4.3,flex-flowThe property is actuallyflex-directionandflex-wrapThe shorthand set of, as follows:

flex-flow: flex-direction || flex-wrap;



4.4,justify-contentThe property is spindle determines item (box) alignment, there5Attribute values, as follows:

justify-content: flex-start;——- Default, left-aligned;

justify-content: flex-end;——- aligned to the right;

justify-content: center;— — — — — — — — center;

justify-content: space-between;—- aligned at both ends with equal intervals between items;



justify-content: space-around;——- The margins between items are equal, which means that each item has a left and right margin (margin:0 10px); So the middle layout will look twice as big as the margins;

4.5,align-itemsThe property is cross axis determines the alignment of items (box), there are5Attribute values, as follows:

align-items: flex-start;——- aligned against the top;

align-items: flex-end;——- aligned against bottom;

align-items: center;——– aligned to center;

align-items: baseline;——- aligned to the right;

align-items: stretch;——- If the item height is not set or auto, set the item (box) height to fill the container height;



4.5,align-contentThe property is cross axis determines the alignment of items (box), there are6Attribute values, as follows:

align-content: flex-start;——- aligned against the top;

align-content: flex-end;——- aligned against bottom;

align-content: center;——- middle aligned;

align-content: space-between;— — — — — — — spacing andjustity-content: space-betweenThe e effect is the same, the former is horizontal, the latter is vertical;

align-content: space-around;— — — — — — — spacing andjustity-content: space-aroundThe effect is the same, the former is horizontal, the latter is vertical, equivalent to (margin:10px 0);

align-content: stretch;——- Default, the interval is automatically allocated if the item is not full of containers, and the cross axis is filled if it is;

Items in the container also have six attributes

Order, flex-grow, flex-basis, flex-shrink, flex, align-self;

5.1,orderProperty defines the sort of items (box), the value must be a number, the sort isThe default value is not set or invalid >1>2>3That is as follows:



5.2,flex-grow(default :0) The ratio of the width of the property to the item (box) without any content isContainer width/Set numberFor example, the container is500px/15=150pxThat is as follows:



If any item has content, the width of the content is compressed from the item with the largest value and then evenly divided among the other items, as shown in the figure below:



250-245.06 = 4.94 pxThe width of the maximum item, and the width of the other two halves:3.95 + 0.98 = 4.93 px, because js calculation has precision problems, so it will be less0.01 px..

5.3,flex-basisProperty to set the width of the item (box) if set onlyflex-basis: 200px;, no Settingswidthormin-widthWidth, the effect is the same asmin-widthThe attributes are the same as follows:





If you set it upflex-basis: 200px; min-widthorwidthIf the value is greater thanFlex-basis **, the former will prevail, otherwise the latter will prevail, and overflow in the content200pxIn addition, the project will not be extended, as shown in the figure









5.4,flex-shrink(Default: 0) The property defines the scale of the item (box), which will be scaled only if the total width of the item exceeds the width of the container, as follows:



5.5,flexAttributes areFlex -grow, flex-shrink, flex-basisShort for, the default value is0 1 auto.flex: flex-grow | flex-shrink | flex-basisIt is recommended to use Flex rather than write the other three separately because the browser automatically calculates different values.

The align-self attribute has the same value as the align-items attribute, but there is one more auto than the latter. Auto inherits the align-items attribute of the parent element, and the effect can be referred to as align-items. This attribute can mainly be set individually and will overwrite align-items.