Flex Flex Box (2)

Flex Container Properties (Part 1)

Row // This is the default orientation of the flex container. Row-reverse // The default orientation is column// from bottom to top. Note: as mentioned last time, the default CSS3 style of The Flex layout has subsets of unset heights, which are filled with the default property align-items: Stretch height. When the Flex alignment changes from horizontal to vertical, and the container subset width is set, the element also defaults to fill the entire container with its width. 2, the flex-wrap property controls whether the container is single-line or multi-line, and the stack direction of the new lines. 3, flex-flow:flex-direction flex-wrap; // The usage is low, which is consistent with the above two attributes.Copy the code

The image above shows the wrap attribute added to the parent

Flex Container Properties (2)

4. The justify-content attribute indicates that flex-start// is aligned in the same direction as the default spindle. Flex-end // The main end of the main axis is flat, and the effect is similar to flex-direction: Row-reverse is different. Center // center space-between// align both ends with the same space between every two Flex elements space-around // The same distance between the two sides of each itemCopy the code

Set flex-direction: row-reverse; attribute


5. Align -items indicates the alignment mode on the cross axis, Flex-start // Cross-start flush flex-end // cross-end flush center // baseline alignment // The first line of the Flex element is baseline Stretch // Height fills the Flex container height when no height is set for the Flex element. Note: The baseline attribute is aligned with the first line of the element by default.

6, align-content Multi-line alignment, single line does not work. Attribute values are as follows: Flex -start// All Flex child elements cross the start of the axis (cross-start) flush flex-end// all Flex child elements cross the end of the axis (cross-end) flush center // all Flex child elements center align stretch // If the height is not set, the entire cross axis will be occupied. The default value is space-between // align both ends of the space-around axis (cross)Copy the code

These are the properties of the Flex container, and the following are the properties of the elements in the Flex container

Flex element attributes

flex-basis: length; // Define the element main-size; In a nutshell, this is setting the size of the main axis on the child element. flex-grow: number; The default value is 0. When each child element is stretched to 1, it is equal to the given large container widths (the default). flex-shrink:number; // The default value is 1, which means the project will shrink if there is not enough space. Note that negative values do not apply to this property. Flex: flex-grow flex-shrink flex-basis// Default value 0 1 auto align-self; Flex-start //cross-start flex-end //cross-end flex-center // baseline // stretch baseline // The element height is the flex container height when set toCopy the code

The above is a summary of some knowledge points about flex elastic box, there are many details in the middle can not be summarized, please understand! If there is any supplementary please leave a message, thank you.