preface

Some of the questions in this article are obtained from the perspective of the interviewer or from the Internet when I was reviewing knowledge points. It is said that the biggest enemy of man is himself, so stand in the interviewer’s point of view to defeat yourself, maybe you, we are struggling.

A few minor issues with the Flex layout

Interviewer: Have you used Flex layouts? Tell me about the properties of flex layouts

Me: Yes, traditional solution for layout, based on box model, relies on display property + position property + float property. It is very inconvenient for special layouts, such as vertical center, so in 2009, the W3C proposed a new layout, flex layout, which can achieve a complete, simple, responsive page layout, it is now supported by a variety of browsers. Flex layouts can be used by any container, even inline elements (display:inline-flex)

Interviewer: What does -webkit-flex do?

Me: Uh… Let me give you an example. For example, most of the mobile phones in our current market are integrated with charging interface and earphone interface. What’s more, when you buy the mobile phone, it does not send the original earphone, so when you want to watch a movie at work, cough cough. A slip of the tongue is when you listen to music and relax. When you look at the round hole headphones on the table, you will silently remember in tears that you need a headset adapter. Webkit-flex is pretty much the same thing. When you want to use flex layout in the webKit-core browser, you have to add display:-webkit-flex

Note: Dramatic words will quickly close the gap between you and the interviewer

Interviewer: OK, I get it, go ahead and talk about some flex properties!

Me: About Flex layout properties: Flex layout properties generally fall into two categories: container properties and project properties

The container has six properties: flex-direction, flex-wrap, flex-flow, context-content, align-items, and align-content

The project also has six attributes: Order,flex-grow,flex-shrink,flex-basis,flex,align-self

If the interviewer asks you a question a few seconds later, do you have any more? You can say it, if you haven’t asked, you can say it, and the interviewer will be impressed with this last attribute, and he will most likely ask you to explain it, and you will go from being a chess piece to a chess player.)

Note: people tend to ignore things that are too easy to get, and hard to get things, this is people’s bad habit.

At this point, I will ask the “interviewer” to ask all the attributes, don’t ask me why, I just want to review the Flex layout

Interviewer: Can you introduce all the ** attributes to me?

I: Flex-direction determines the direction of the main axis, and it has four values for four directions. Row is the default, making the main axis horizontal and running west to east, while row-reverse sets the main axis to run east to west and column to run north to south. Column-reverse is going from south to north

I: For flex – wrap attributes, this reminds me of my freshman year when dining hall, I don’t know how those people can be so fast, when all arrive dining room with my roommate when I see such a long team, my heart is desperate, but sometimes the team is too long, aunt canteen waved to us will seem like an angel, told us the other team. Flex-wrap also plays a role in how to wrap lines when an axis does not fit.

Flex has three values nowrap is the default, no line breaks, wrap wrap first line on top, wrap-reverse wrap first line on bottom

Me: Flex-flow is shorthand for flex-direction and flex-wrap, default: row nowrap; And then the back of what I just said, look it up

Me: the justify-content property defines the alignment on the main axis and has five values

• Flex-start is left-aligned
• The flex – end right alignment
• Space-between is aligned at both ends, with equal intervals between items
• Space-around each item is equidistant on both sides, so the distance between the items is twice the distance between the item and the border.

Me: align-items defines how items are aligned on the cross axis, with five values

• Flex-start is the starting alignment of the cross axes
• Flex-end aligns the end of the cross axis
• Center cross axis midpoint alignment
• Baseline alignment of the first line of text of the baseline project
• “Stretch” If the height is not set, or “Auto” is set, the height of the entire container will be filled

Me: align-content defines the alignment of multiple axes

• Flex-start is aligned with the starting point of the cross axis
• Flex-end is aligned with the endpoint of the cross axis
• Center is aligned with the midpoint of the intersecting axis
• The space-btween is aligned with both ends of the crossing axis, and the spacing between the axes is evenly distributed
• Space-around Each axis is equally spaced on both sides, so the space between the axes is twice the space between the axis and the border
• Stretch axis occupies the whole cross axis

Me: order defines the order of items the smaller the number, the higher the order defaults to zero

Me: Flex-gorw defines the size of the project. The default value is 0, which means no expansion even if there is spare space. If all the projects have a value of 1, all the projects share the spare space equally.

Me: Flex-shrink defines a project shrink scale. The default value is 1, that is, all projects shrink equally if space is insufficient. If one project has a Flex-shrink attribute of 0 and the other projects have a FLEx-shrink attribute of 1, then the former does not shrink and the latter shrinks equally if space is insufficient.

I: The main size property defines the main size of the project before allocating extra space. The browser uses this property to calculate whether there is any free space on the main axis. Its default value is auto, which is the size of the project itself. The project will occupy a fixed space.

The flex attribute is short for flex-grow, flex-shrink, and Flex-basis. The default value is 0 1 auto. This attribute has two shortcut values auto (1 1 auto) and None (0 0 auto).

Align-items can be overwritten by the align-items attribute. The default value is auto, which inherits the attribute of the parent element. If there is no parent element, it is equivalent to stretch, which may take 6 values except auto. Everything else is exactly the same as the align-items property.

Note: When the interviewer is faced with the same answers, your fresh and refined words will make you a fresh stream of water in his heart.

Interviewer: The flex-basis attribute takes up margins when the percentage is greater than 100%

Me: No, if the project has a margin value, the margin value will exist, that is, the part of the margin value will be occupied, no matter the total flex-basis is 10000%, the margin value will not be removed.

Interviewer: You can explain to me the flex-shrink calculation rules

I:

• Flex-shrink only works if the sum of the default widths of the content is greater than the container
• The content, border, and padding of the child containers in the container must be computed to get the correct shrink index
• The width of border and padding will not change even if the calculation is performed. If the total width is still larger than the container width, it will exceed the box. Even if box-sizing is set to border-box, border and padding will not shrink

Let’s say I have a content container with an ID and I have five boxes in it, and the content container is 500px wide,

The initial content width of each box is 120px + border 3px * 2 = 126px,

Now the flex-shrink value is 1 for the first three boxes and 2 for the last two boxes.

The difference between the sum of the initial width of the box and the content container width

δ = 126 * 5-500 = 130

Shrinkage index

δ T = 130 ÷ (1 * 3 + 2 * 2)

First three box widths

Box = 126 – δ t

Last two box width

Box1 Δ t = 126-2

conclusion

In fact, BEFORE writing this article, I have not interviewed, write these are based on theory and imagination, you can refer to, but do not memorize, because I do not know when I face the interview, will be so indifferent when writing the article. Therefore, the paper come zhongjue shallow, that this matter to practice, practice is the best teacher, come on, come on.