Dev by Joy Shaheb

Click “like” to see, wechat search ** [big move the world],B station pay attention to [front-end small wisdom] ** this does not have a big factory background, but has a positive attitude. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Recently open source a Vue component, is not perfect, welcome everyone to improve it, also hope you can give a star support, thank you.

Making address:Github.com/qq449245884…

In 2021, we are going to review the use of flexbox, and some of the less used attributes to make it easier for you to understand. Here are some interesting pictures to illustrate.

FlexBox architecture

FlexBox chart

flex-direction

The direction of the row/column distribution of flex-item inside flex-Container.

justify-content

Context-content sets or retrieves the alignment of elastic box elements along the main axis (horizontal axis)

align-content

The align-content property sets how the browser allocates space between and around content items along the vertical axis of the elastic box layout and the main axis of the grid layout.

align-items

In contrast to justify-content, align-items are vertically aligned. Properties include flex-start, Flex-end, Center, Initial, and inherit.

Align-content and align-items differ:

  • align-itemsSuitable for single line cases, with only up-aligned, down-aligned, centered and stretched
  • align-contentSuitable for line breaks (multiple lines) (not valid for single lines), you can set attributes such as alignment, down-alignment stretch, and average allocation of remaining space.
  • The summary is single row searchalign-itemsMultiple lines to findalign-content.

align-self

flex – grow | shrink | wrap

  • Flex-grow: Increases the size of a Flex-item based on the width of the Flex container.

  • The Flex-shrink attribute specifies the shrink rule for flex elements. Flex elements shrink only when the sum of the default widths is greater than the container, depending on the flex-shrink value.

  • Flex-wrap specifies whether a Flex element is displayed on one or more lines. This property allows you to control the stacking direction of rows if line breaks are allowed.

shorthand

  • Flex: This is short for a combination of flex-grow, flex-shrink, and flex-basis.

  • Flex-basis: This is similar to adding width to flex-item, only more flexible. Flex-basis: 10em It sets the initial size of an elastic project to 10em, whose final size depends on the available space, flex-grow, and Flex-shrink.

Finish ~, I am small wisdom, I am going to brush the bowl, we will see you next time!

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: dev. To/joyshaheb/f…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.