The author to build | peak

Source | lesson for network (imooc.com)

preface

Flex (Flexible Box) stands for Flexible layout. “Elastic,” as the name suggests, is the property of a spring, able to expand and contract freely. Flex is not a recent invention, but it was first proposed a decade ago. In 2009, the W3C introduced a new approach, Flex layout, that enables easy, complete, and responsive implementation of various page layouts. It is currently supported by all browsers, which means it is safe to use it now.

How is the Flex layout used?

Any container can be specified as a Flex layout

.box {
    display: flex;
}
Copy the code

Any container can be specified as a Flex layout

.box {
    display: inline-flex;
}
Copy the code

Example:

Flex concepts

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”

The container has two axes by default:

Horizontal main axis and vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.

By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.

Does it feel like learning again? It is good to understand the concept of things, this need not remember, will not be like going to school to recite the text, but also the exam.

Flex container Properties

Flex-direction: determines the arrangement direction of items

Flex-direction has four values:

  1. Row (default) : The main axis is horizontal and the starting point is on the left.
  2. Row-reverse: The main axis is horizontal and the starting point is at the right end.
  3. Column: The main axis is in the vertical direction, and the starting point is in the upper edge.
  4. Column-reverse: the main axis is vertical and the starting point is at the bottom.

In the example above, if we change the matrix slightly and set the main axis to vertical, the following layout will appear.

Example:

You can also set the main axis to be vertical with the starting point down.

Example:

Do you think you’re going to use Flex in the future?

Second, the flex – wrap

By default, items are arranged on a line (also known as an axis). The flex-wrap property defines how to wrap an item if an axis does not fit.

Flex-wrap has three values:

  1. Nowrap (default) : no line breaks
  2. Wrap: The first line is at the top.
  3. Wrap-reverse: newline with the first line at the bottom.

Example:

Third, the flex – flow

The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}
Copy the code

Justify -content: defines the alignment of items on the main axis

Implement-content has five values:

  1. Flex-start (default) : left-aligned
  2. Flex-end: right-aligned
  3. Center: a center
  4. Space-between: both ends are aligned with equal intervals between items.
  5. Space-around: The spacing between two sides of each item is equal. Therefore, the spacing between items is twice as large as the spacing between items and the border.

Example:

5, align-items: How to align items on the cross axis

  1. Flex-start: Alignment of the starting point of the cross axes.
  2. Flex-end: alignment of ends of crossed axes.
  3. Center: Alignment of the midpoint of the cross axis.

Example:

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

Example:

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

Align -content: alignment of multiple axes

How do multiple axes appear? If the width is exceeded, there will be multiple axes after line feed.

  1. Flex-start: align with the starting point of the cross axis.
  2. Flex-end: aligns with the end of the cross axis.
  3. Center: aligns with the midpoint of the intersecting axis.
  4. Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes.
  5. Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.
  6. Stretch (default) : Axis takes up the entire cross axis. Compare the difference between adding align-content and not having align-content:

Attributes of the Item

A, the order

Order of items. The smaller the value is, the more advanced it is. The default value is 0.

Example:

Give item a sort value, and sort by that value. The default for no set value is 0.

Second, the flex – turns up

Define the magnification ratio of Item. Default is 0, that is, if there is free space, it will not be enlarged. It means to divide 100% width/height into what proportion.

Example:

For example: If all projects have a flex-grow attribute of 1, they divide the remaining space equally (if any). If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items. (See the example above)

Third, the flex – the shrink

Defines the scaling of an Item. The default is 1, that is, if there is not enough space, the Item will shrink

See above: If 100+200+200=500px, it exceeds the width of box (400px). If 100+200+200=500px, it exceeds the width of box (400px). If 100+200+200=500px, it exceeds the width of box (400px). If the width is insufficient, Item3 will shrink, where the actual width of Item3 is 100px.

Look at the picture below:

Item1 /item3 is set to flex-shrink to 1 and Item2 to flex-shrink to 0.

Fourth, the flex – basis

The Flex-basis attribute defines the main size that an Item occupies before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is auto, which is the original size of Item.

Example:

This property can be replaced by setting the width and height directly, as shown in the comment above.

Five, the flex

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional.

So the first few examples write flex directly, which is a shorthand for flex-grow, flex-shrink, and flex-basis.

Sixth, the align – self

The align-self attribute allows a single Item to be aligned differently from other items, overriding the align-items attribute. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

Example:

This overwrites the align-items of the container.

Do you see that Flex can handle most of the front-end layout? Indeed, it is, and that is one of the reasons why it is so popular, despite the compatibility issues with older browsers, I believe that float should be used less and less.