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

This article introduces the relevant knowledge of "what is flex in css". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In css, the full name of flex is flexible, meaning "flexible layout", which is a layout that can be used to provide maximum flexibility to a box model; any container can be specified as a Flex layout.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

1What is the layout of 1dwelling flex?

Officially, Flex is an acronym for Flexible Box, meaning "flexible layout" and is used to provide maximum flexibility for box models. Any container can be specified as a Flex layout.

Folk saying: flex is a kind of layout, similar to block,inline-block and so on.

2Concepts involved in dwelling flex

The basic function of Flex is to make the layout easier, such as "vertical center" and so on. Of course, it is more than that. To be clear about the role of flex, you must first understand some 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.

Just remember the meaning and direction of "container", "project", "principal axis (horizontal axis)" and "cross axis (vertical axis)".

3. Attributes of container

3.1 flex-direction

Flex-direction determines the direction of the principal axis (that is, the direction in which items are arranged). It has four possible values:

Row (default): the principal axis is horizontal and the starting point is at the left end of the container.

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

Column: the principal axis is vertical, and the starting point is on the upper edge of the container.

Column-reverse: the principal axis is vertical, and the starting point is at the lower edge of the container.

3.2 flex-wrap

By default, all items in the container are lined up on a single line, and flex-wrap defines how to wrap if one line doesn't fit. It has three possible values:

Nowrap (default): no line wrapping.

Wrap: line break, the first line is at the top.

Wrap-reverse: wrap, the first line is at the bottom.

3.3 flex-flow

The flex-flow property is an abbreviation for the flex-direction property and the flex-wrap property, and the default value is row nowrap.

3.4 justify-content

Justify-content defines the alignment of the project on the spindle. There are five possible values:

Flex-start: align to the starting position of the spindle, that is, from the starting position of the spindle. If you use the flex-direction property to change the direction of the principal axis, the corresponding arrangement of items will also change.

.container {display: flex; flex-direction: row; justify-content: flex-start;}

.container {display: flex; flex-direction: row-reverse; justify-content: flex-start;}

Flex-end: align to the end position of the spindle, that is, starting from the position where the spindle ends. Like flex-start, it has something to do with flex-direction.

.container {display: flex; flex-direction: row; justify-content: flex-end;}

Center: Center

.container {display: flex; flex-direction: row; justify-content: center;}

Space-between: if there are more than two items, the start and end positions of the container spindle are one, the other items are evenly arranged, and the intervals between the items are equal. The order is also related to flex-direction. If there are only two projects, then one on each side. If there is only one item, it is arranged only at the beginning of the container spindle.

Space-around: the intervals on both sides of each item are equal. Therefore, the interval between items is twice as large as the interval between the project and the border. The order is also related to flex-direction. If there is only one item, it is arranged in the middle.

3.5 align-items attribut

The align-items property defines how the project is aligned on the cross axis (vertical axis). It may take five values. The specific alignment is related to the direction of the cross axis, which is assumed to be from top to bottom.

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

Flex-end: the end point of the cross axis is aligned.

Center: the midpoint alignment of the cross axis.

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

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

3.6 align-content Properties

The align-content property defines the alignment of multiple grid lines (multiple lines). If the project has only one axis (one line), this property has no effect.

If the value of flex-direction is column, this property defines the alignment of multiple columns. If the project has only one column, this property cannot afford to be left or right.

Stretch (default): multiple lines occupy 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.

IV. Properties of the project

4.1 order Properties

.item {order:;}

The order property defines the order in which items are arranged. The lower the number, the higher the arrangement, and the default is 0.

4.2 flex-grow Properties

.item {flex-grow:; / * default 0 * /}

The flex-grow property defines the magnification of the project, which defaults to 0.

If the flex-grow values of all item are the same, then the width on the spindle is evenly distributed with the minimum width of the item. If item does not set width, then all item equally divide the remaining width (extra space) on the spindle.

If the value of the flex-grow of the item is different, the remaining width (extra space) on the spindle is allocated according to the corresponding ratio. Also take the width set by item as the minimum value.

If the max-width is set by item, the width magnified will not exceed this value.

4.3 flex-shrink attribut

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.

.item {flex-shrink:; / * default 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.

If the flex-wrap set by the container container does not run out of space, it will automatically wrap if it exceeds it. So setting flex-shrink doesn't work at this time.

A negative value is not valid for this property.

4.4 flex-basis Properties

The flex-basis attribute defines the principal axis 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.

.item {flex-basis: | auto; / * default auto * /}

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.

4.5 flex attribut

The flex attribute is an abbreviation for flex-grow, flex-shrink, and flex-basis, and the default value is 0 1 auto. The last two attributes are optional.

.item {flex: none | [? | |]}

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

It is recommended that you give priority to using this property rather than writing three separate properties separately, because the browser calculates the relevant values.

If the sum of the flex-basis is greater than the width of the parent, the child is compressed, and the final choice is flex-shrink for compression calculation

Weight = son1 + son2 +... . + sonN

Then the compressed formula is

Compressed width w = (child element flex-basis value * (flex-shrink) / weight) * overflow value

If the sum of the flex-basis is less than the parent width, the remaining width will be percentage based on the sum of the flex-grow values

Width of the extension w = (flex-grow value of child elements / sum of all child elements flex-grow) * residual value

4.6 align-self Properties

The align-self property allows a single project to be aligned differently from other items, overriding the 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.

Item {align-self: auto | flex-start | flex-end | center | baseline | stretch;} "what is flex in css"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.