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

What are the knowledge points of this article "flex layout basic Grammar?" most people do not understand, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what is the basic grammar of flex layout?"

1. What is a flex layout?

Flex is the abbreviation of FlexibleBox, which means "flexible layout" and is used to provide maximum flexibility for box models.

Flex layout: .box {display:flex;}

Inline elements can also be laid out using flex: .box {display:inline-flex;}

Browsers with Webkit kernel must be prefixed with-webkit: .box {display:-webkit-flex;display:flex;}

Note that when set to the Flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.

two。 Basic concept

Flex container (flexcontainer): an element that uses a Flex layout, called a flex container.

Flex project (flexitem): all child elements of the flex container automatically become container members, that is, the flex project.

The two axes of the container: horizontal principal axis (mainaxis) and vertical cross axis (crossaxis).

Spindle (mainaxis): start position-> mainstart, end position-> mainend. Items are arranged along the spindle by default.

Cross axis (crossaxis): start position-> crossstart, end position-> crossend

The spindle space occupied by a single item in the container is called-> mainsize, and the cross-axis space is called-> crosssize.

3.FLex attribute

Flex properties are divided into container properties and project properties.

Container attribute: flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content

Project Properties: order,flex-grow,flex-shrink,flex-basis,flex,align-self

3.1 Container Properties

Flex-direction: determines the direction of the spindle (that is, the direction of the arrangement of items)

Row: horizontal, from left to right. (default attribute)

Row-reverse: horizontal, from right to left.

Column: vertical, from top to bottom.

Column-reverse: vertical, from bottom to top.

Flex-wrap: stipulate that an axis cannot fit, how to change the line.

Nowrap: no line wrapping (default attribute)

Wrap: line break. The first line is above.

Wrap-reverse: line break, the first line is below, (only the number of lines is arranged in the opposite direction, and each line is still arranged from left to right within a single line).

Flex-flow: combined with flex-direction and flex-wrap, it is written as follows

.box {flex-flow:columnwrap-reverse}

Justify-content: defines the alignment of the project on the spindle

Flex-start: align to the left (default), and the project is aligned to the start of the spindle

Flex-end: align to the right, and the project ends at the spindle

Center: Center

Space-between: both ends are aligned and the items are evenly spaced

Space-around: the intervals on both sides of each item are equal. Therefore, the distance between items is twice as large as that between the project and the border.

Align-items: defines how items are aligned on the cross axis (single line only, multiple line alignment is defined by align-content)

Stretch: if the project is not set to height or is set to auto, it will occupy the height of the entire container (default)

Flex-start: from top to bottom, with the starting point of the cross axis as the baseline, extending to the end point

Flex-end: from bottom to top, with the end of the cross axis as the baseline, extending to the starting point

Center: the midpoint of the cross axis is aligned, and the midpoint of the project is placed on the midpoint of the cross axis

Baseline: align with the first line of text for each item in a line.

Align-content: defines the alignment along the cross axis when there are multiple lines of items in the container. If the item has only one axis, this property has no effect.

Stretch: axis occupies the entire cross axis (each row has one axis), default attribute

Flex-start: aligning to the start point of the cross axis

Flex-end: aligning to the end of the cross axis

Center: aligning to the midpoint of the cross axis

Space-between: multi-line items are evenly spaced across the cross axis

Space-around: multiline items are equally spaced on both sides of the cross axis. Therefore, the distance between the project on the cross axis is twice as large as that between the project and the border.

Note: justify-content,align-items and align-content are the properties of the container, not the project. They set the items in a container to be aligned to a certain position on the axis.

3.2 Project Properties

Order: defines the order in which items are arranged. The smaller the value, the higher the order. The default value is 0, written as follows

.item {order:5}

Flex-grow: defines the magnification of the property item. Default is 1.

If all items have a flex-grow property of 1, they will divide the remaining space equally, if any. If the flex-grow property of one project is 2 and all other projects are 1, the former will occupy twice as much remaining space as the other items.

Flex-shrink: defines the project scale reduction. Default is 1.

If the flex-shrink property of all projects is 1, it will be scaled down proportionally when there is insufficient space. If the flex-shrink property of one project is 0 and all other projects are 1, the former will not shrink when there is insufficient space. A negative value is not valid for this property

Flex-basis: defines the spindle space (mainsize) occupied by the project before allocating excess space. Based on this attribute, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of the project

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

Flex: combines the attributes of flex-grow,flex-shrink and flex-basis. The default value is 01auto. It is recommended to use it first.

This property has two shortcut values: auto (11auto) and none (00auto)

Align-self: allows a single project to be aligned differently from other projects. It overrides the align-items attribute. The default value is auto, which inherits the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

This attribute may take six values, all of which are exactly the same as the align-items property except auto

The above is about the content of this article on "what are the basic grammars of flex layout?" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please 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.