“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

preface

The last article covered container properties. This article will cover project properties. The Portal

How do I understand container properties and project properties? The container attributes are added to the container, and the item attributes are written to the item, just like the container attributes to ul and the item attributes to Li. Ul is a container that contains many Li projects. This is how I think about it.

All right, back to business. XDM ready?

The project properties

order

Value: The default value is 0, which determines the item order. The smaller the value is, the higher the item order is.

flex-grow

Value: The default value is 0, which is used to determine whether to enlarge the project when there is free space. The default value is no. Note that even if you set a fixed width, it will zoom in.

Assuming that the first two of the three projects are 0 by default and the last one is 1, the last project will be filled with all the remaining space.

Assuming only the first project defaults to 0 and the next two projects both flex-grow to 1, then the last two projects split the remaining space equally.

Assuming that the first project defaults to 0, the second project is flex-grow:2, and the last project is 1, the second project takes twice as much space to zoom in as the final project.

flex-shrink

Value: default 1, used to decide whether the project is narrowed when the space is insufficient, the default project is 1, that is, when the space is insufficient, everyone equals to narrow; Note that even if you set a fixed width, it shrinks.

But if flex-shrink is set to 0 for a project, it will not shrink itself even if there is not enough space.

The second project in the figure above has flex-shrink as 0, so it doesn’t shrink itself.

flex-basis

Value: Default auto, which is used to set the width of the project. By default auto, the project will keep the default width or use width as its own width, but if flex-basis is set, the weight will be higher than the width property, so the widTN property will be overwritten.

In the figure above, the Flex-basis property is set first, followed by the width property, but the width is still the Flex-basis property.

flex

Value: Default: 0, 1 auto. The Flex property is shorthand for the flex-grow, Flex-shrink, and Flex-basis properties that define item size, shrink, and width.

This property also has several shortcut key values, which are essential when interviewing with Flex.

  • flex: auto (1 1 auto)
  • flex: none (0 0 auto)
  • flex: 1 (1 1 0%)
  • flex: 0 (0 1 0%)

Auto (1, 1 auto) is equal to zoom in and out, and None (0, 0 auto) is neither zoom in nor out.

Interviewer: Tell me the difference between Flex: Auto and Flex :1?

I:…

< span style = “box-sizing: border-box; color: RGB (74, 74, 74); line-height: 20px; font-size: 16px! Important; word-spacing: 0px; When Flex is auto, the width setting will be valid. This is a very classic question, and the interview questions are also from this differentiation, you are interested, you can go to research.

align-self

Values: auto (default) | flex – start | flex – end | center | baseline | stretch, inherit the align – the items property of the parent container. If there is no parent element, default is stretch.

Used to make individual items have different alignments from other items, with values behaving exactly the same as the parent container’s align-items property.

summary

At this point, the flex layout properties are basically the end of the introduction, they also follow the honest and honest practice again. Practice is really important, he is not a big guy, can not read once to remember also can draw lessons from one another, I am a vegetable chicken real hammer, can only honestly more practice. Finally attached summary diagram.