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

Brief introduction

Flex, the flexible box elastic layout box model, is a new type of layout attribute proposed by W3C in 2009. the purpose of introducing the elastic box layout model is to provide a more efficient way to arrange, align and allocate blank space for the child elements in a container. Browsers support the following:

The emergence of the flex box model is mainly to address the inconvenience of dealing with some cases based on display+position+float, such as centered layout:

Use positioning:

.father {

Width: 400px

Height: 400px

Position: relative

}

.children {

Width: 100px

Height: 100px

Position: absolute

Top: 50%

Height: 50%

Margin-left:-50px

Margin-top:-50px

}

Use of flex:

.father {

Width: 400px

Height: 400px

Display: flex

Justify-content:center

Align-items:center

}

.children {

Width: 100px

Height: 100px

}

As you can see, if you use flex, it's very simple. Justify-content and align-items define the alignment of telescopic items along the principal axis and the alignment of scalable items along the vertical axis, respectively. The benefits of Flex are much more than these. Let's take a look at the basic properties defined by W3C.

Basic concept

Spindle (main axis): a telescopic item is arranged along the spindle of a telescopic container, which is an extension of the spindle direction.

Vertical axis (cross axis): the axis perpendicular to the principal axis is called the lateral axis, which is an extension of the lateral axis.

Container Properti

3.1 Flex-direction

Flex-direction determines the direction of the spindle, and its values are as follows:

Row (default): arrange horizontally (align left).

Row-reverse: reverses the horizontal arrangement.

Column: arranged vertically.

Column-reverse: reverses the vertical arrangement.

Flex-wrap

Nowrap-by default, the elastic container is a single line.

Wrap-Elastic containers are multiline.

Flex-flow

Flex-flow is an abbreviation for flex-direction and flex-wrap. It can be assigned at the same time. It defaults to row nowrap.

Justify-content

Flex-start (default): align left

Flex-end: align to right

Center: Center

Space-between: both ends are aligned.

Space-around: elastic items are evenly distributed on the line, leaving half the space between the two sides.

Align-items

Flex-start: the start point of the vertical axis is aligned.

Flex-end: the end of the vertical axis is aligned.

Center: the midpoint of the vertical axis is aligned.

Baseline: the baseline alignment of the first line of text of the project.

Stretch (default): if the property value of the specified side axis size is' auto', its value will make the size of the project's margin box as close as possible to the size of the row.

Align-conten

Flex-start: aligns with the start point of the vertical axis.

Flex-end: aligns with the end of the vertical axis.

Center: aligns with the midpoint of the vertical axis.

Space-between: aligned with both ends of the vertical axis, the spacing between the axes is evenly distributed.

Space-around: the intervals on both sides of each axis are equal. Therefore, the interval between the axis is twice as large as the interval between the axis and the frame.

Stretch (default): the grid line occupies the entire vertical axis.

Project attribute

Flex

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

Order

Property defines the order in which items are arranged. The lower the value, the higher the arrangement. The default is 0.

Flex-grow

Flex-grow defines the expansion ratio of the elastic box element, which defaults to 0, that is, if there is any remaining space, it is not zoomed in, and if all items have a flex-grow attribute 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

The flex-shrink property defines the reduction of the project, which defaults to 1, that is, if there is not enough space, the project will shrink, and if the flex-shrink property of all projects is 1, it will be scaled down in proportion when there is not enough 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

Flex-basis defines the contraction ratio of the elastic box element and the spindle space (mainsize) occupied by the project. Based on this property, 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.

Align-self

Align-self is used on elastic subelements. Overrides the container's align-items property. The default value is auto, which inherits the align-items attribute of the parent element, which is equivalent to stretch if there is no parent element. Except for auto, align-self is basically the same as align-items properties.

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.