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

Today, the editor will share with you what are the relevant knowledge points of CSS3's flex knowledge points, the content is detailed, and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Traditional layout: positioning (position), floating (float) around the box model (border, margin, padding), etc.

Flex layout, also known as flexible layout, mainly consists of two parts: six attributes of the container (parent element) and six attributes of the project (child element).

Basic concepts:

Elements that use Flex layouts are called Flex containers (flex container), or "containers" for short. All its child elements automatically become container members, called Flex projects (flex item), or "projects" for short.

By default, the container has two axes: a horizontal principal axis (main axis) and a vertical cross axis (cross axis).

The start position of the spindle (the intersection with the border) is called main start, and the end position is called main end;. The start position of the cross axis is called cross start, and the end position is called cross end.

Projects are arranged along the principal axis by default. The spindle space occupied by a single project is called main size, and the cross-axis space occupied by a single project is called cross size.

1. Six attributes of the container:

1. Flex-direction attribute: determines the direction of the spindle. There are four attribute values row | row-reverse | column | column-reverse

Row: by default, the principal axis is horizontal and the starting point is at the left end

Row-reverse: the principal axis is horizontal and the starting point is at the right end.

Column: the principal axis is vertical, and the starting point is above.

Column-reverse: the principal axis is vertical, and the starting point is below.

2. Flex-wrap attribute: determines whether to wrap lines when an axis cannot fit all items. There are three attribute values: nowrap | wrap | wrap-reverse

Nowrap: by default, there is no line wrapping. When the line fails, the project will be scaled down according to the value of the project's flex-shrink attribute (see below, the project's reduction ratio is 1 by default).

Wrap: line break with the first line at the top

Wrap-reverse: wrap, the first line is below

3. Flex-flow attribute: it is the abbreviated form of flex-direction attribute and flex-wrap attribute. The default value is row nowrap.

4. Justify-content attribute: defines the alignment of the project on the spindle. There are five attribute values: flex-start | flex-end | center | space-between | space-around

Flex-start: default value, start point alignment on the spindle

Flex-end: end point alignment on spindle

Center: centered on the spindle

Space-between: both ends (start and end) are aligned, with equal spacing between items

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.

The specific visual alignment is related to the direction of the principal axis, which is the default (the principal axis is horizontal and the starting point is at the left end):

Flex-start: align to the left

Flex-end: align to right

Center: horizontal center

Space-between: both ends (left and right) are aligned, with equal spacing between items

Space-around: each item is equally spaced on both sides (left and right). Therefore, the distance between items is twice as large as that between the project and the border.

5. Align-items attribute: defines the alignment of the project on the cross axis. There are five attribute values: flex-start | flex-end | center | baseline | stretch

Flex-start: default value, start point alignment on cross axis

Flex-end: end point alignment on cross axi

Center: Center on cross axes

Baseline:

Stretch:

6. Align-content attribute: defines the alignment of multiple axes. If the project has only one axis, this property does not work and has six property values: flex-start | flex-end | center | space-between | space-around | stretch

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

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

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

Center: aligns with the midpoint of the cross axis.

Space-between: aligned with both ends of the cross 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.

Second, the properties of the project

1. Order attribute: defines the order of items. The smaller the value, the higher the arrangement. The default is 0.

Order: integer

2. Flex-grow attribute: defines the magnification of the project. It will be zoomed in according to this value when there is spare space. The default is 0, that is, it will not be zoomed in when there is spare space.

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.

3. Flex-shrink attribute: defines the reduction scale of the project. The default is 1, that is, if there is not enough space, the project will be reduced.

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

4. Flex-basis attribute: defines the spindle space (main size) occupied by the project before allocating excess space. 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.

You can set it to the same value as the width or height property (such as 350px), and the project will occupy the fixed space.

5. Flex attribute: it is short for flex-grow, flex-shrink and flex-basis. The default value is 0 1 auto. The last two attributes are optional

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

6. Align-self attribute: allows a single project to be aligned differently from other projects, overriding 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.

There are six attribute values: auto | flex-start | flex-end | center | baseline | stretch

The main points to pay attention to are:

Any element can be set to a flexible layout

In an elastic container, only the direct child elements are elastic elements

To make the grandchild element also elastic, add the style display:inherit to the corresponding elastic child element.

These are all the contents of the article "what are the flex knowledge points of CSS3". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.