Shulou(Shulou.com)06/03 Report--

Editor to share with you the CSS flex container and flex properties of the example analysis, I believe that most people do not understand, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

Flex container (flex container or elastic container)

The flex container is the parent element of the flex element. Defined as flex or inline-flex by setting the value of the display property.

Note the attribute values of the older version:

Box: displays the object as an elastic container. (oldest version)

Inline-box: displays objects as inline block-level elastic containers. (oldest version)

Flexbox: displays the object as an elastic container. (transitional version)

Inline-flexbox: displays objects as inline block-level elastic containers. (transitional version)

Flex item (flex child element or elastic sub-element)

Each child element of the flex container is a flexchild element. Note: the text directly contained in the felx container becomes an anonymous elastic child element.

Note: Flexbox layout and the original layout are two sets of concepts, so some css attributes will not work in flexure sub-elements, such as float, clear, vertical-align, column-*, etc.

Axis:

Each flex child element is arranged in turn along the principal axis (main axis). The cross axis (cross axis) is perpendicular to the principal axis.

The property flex-direction defines the principal axis direction.

The attribute justify-content defines how the flexure child elements are arranged along the principal axis.

The attribute align-items defines how the flexure child elements are arranged along the cross axis.

The attribute align-self overrides the align-items attribute of the parent element and defines how the individual flexure child elements are arranged along the cross axis.

Direction:

The start edge of the spindle (main start), the end edge of the spindle (main end) and the start edge of the cross axis (cross start) of the flex container, and the end edge of the cross axis (cross end) are the start and end positions of the arrangement of flexure sub-elements. They depend on the position of the principal and cross axes in the vector established by the writing-mode (left-to-right, right-to-left, and so on) attribute.

The attribute order groups the elements in turn and determines who appears first.

Attribute flex-flow is an abbreviation for attributes flex-direction and flex-wrap, which is used to arrange flexure child elements.

OK:

The flex child element can be arranged in either one or multiple lines, depending on the side axis direction controlled by the flex-wrap attribute (in which a new vertical line can be created).

Dimensions:

The width and height of flex child elements can be correspondingly equivalent to principal dimensions (main size) and cross dimensions (cross size), both of which depend on the principal axis and side axis of the flex container, respectively.

The initial values of the min-height and min-width properties are the new keyword auto.

The attribute flex is an acronym for flex-basis,flex-grow and flex-shrink, which represents the scalability of flexure child elements.

Flex attribute

Flex (the length of the item in the elastic container)

Flex: flex-grow flex-shrink flex-basis/auto/initial/inherit

The flex property sets the length of the item in the elastic container.

The flex attribute is an abbreviation for flexGrow, flexSHrink, and flexBasis attributes, that is, you can define the values of three attributes.

Note: if the element is not an elastic container, the flex attribute will have no effect.

The value of flex and its description

The value of flex and its description value indicate the value of flex-grow relative to the width of the stretched object in the elastic container the value of flex-basis relative to the width of the compressed object in the elastic container sets the width of each item, possible values and legal units:

Auto

Inherit

%:

Px

Em

Auto has the same default value as 1 1 auto: 0 1 autonone is the same as 0 auto. Initial maintains the value of the original attribute inherit inherits the setting of the parent element. Default value: 0 1 auto

Inheritance of values: no inheritance

JavaScript syntax: object.style.flex= "1"

Use example:

HTML file

# myD {width: 220px; height:80px; border: 1px solid black; display:-webkit-flex; / * Safari * / display: flex;} # myD div {- webkit-flex: 2; / * Safari 6.1 + * /-ms-flex: 2; / * IE 10 * / flex: 2 } Red, light blue, green and other contents are all the contents of this article entitled "sample Analysis of flex Container and flex attributes in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.