The invention of the Flexbox was a great boon for Csser, who no longer had to struggle to center an element vertically. It can also achieve flexible layout, you can say that it can not do, only you think. However, due to historical reasons, there were several versions of Flexbox circulating in the market, requiring different manufacturer prefixes or using completely different attribute names, which caused confusion at first.However, with the advent of CSS processors, we can use flexbox without having to worry about browser compatibility. Related blog posts:Still prefixing CSS manually? No! An introduction to several methods for automatically handling CSS prefixes

What is flexbox?

Literally, flexbox means stretchable box. We can make the items in this box stretch and align and sort according to our needs. Setting the parent element to Flexbox activates this elastic mechanism. The method is as follows:

First let’s set up the HTML


     

    
      

    
      

    
      


     

Copy the code

Next, set up the CSS

.parent { display:flex; // similar to display:block flexbox}Copy the code

or

.parent { display:inline-flex; // Similar to display:inline-block flexbox}Copy the code

Two, too many attributes are hard to remember?

There are so many attributes associated with Flexbox, and each attribute has a different value, that it’s impossible to remember them all at once, but we can categorize them and use them in our mind. Just remember two things about flexbox:

  1. All attributes fall into two categories: attributes of the parent container and attributes of its children
  2. Almost all the attribute values are related to the three characteristics of arrangement, alignment and floor area

Parent container properties

attribute role Feature classification
flex-direction Defines the orientation of the children in the container arrangement
flex-wrap Defines a line break for a child item inside a container arrangement
flex-flow Compound properties of flex-direction and flex-wrap arrangement
justify-content Defines the horizontal alignment of child items within the container alignment
align-items Defines the vertical alignment of child items within the container alignment
align-content Defines the overall vertical alignment of multiple line items within a container alignment

Item properties

attribute role Feature classification
order Define the order of the children arrangement
flex-grow Defines the proportion of child items that stretch when the sum of their widths is less than the width of their parent elements Covers an area of
flex-shrink Defines the scale of children when the sum of their widths exceeds the width of the parent element Covers an area of
flex-basis Defines the initial widths of the children, which are scaled flex-basis if the sum of their widths exceeds the width of the parent element Covers an area of
align-self Defines the alignment of a single subitem that differs from other items alignment

Properties of the parent container

Let’s take a look at the effects one by one, starting with the attributes of the parent element. (Don’t forget that we’ve already added display:flex to the parent element, which is hidden for visual comparison.)

3.1 the flex – direction attribute

Defines the orientation of the children in the container

.parent {
  flex-direction: row | row-reverse | column | column-reverse;
}
Copy the code

3.2 the flex – wrap attributes

Defines a line break for a child item inside a container

.parent {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
Copy the code

3.3 the flex – flow properties

Flex-flow is short for flex-direction and flex-wrap. Refer to the preceding two properties.

3.4 the justify – content attribute

Defines the horizontal alignment of child items within the container

.parent  {
  justify-content: flex-start | flex-end | center | space-between | space-around; 
 }
Copy the code

3.5 the align – the items property

Defines the vertical alignment of child items within the container

.parent {
  align-items: flex-start | flex-end | center | baseline | stretch;
 }
Copy the code

3.6 the align – content attribute

Defines the overall vertical alignment of multiple line items within a container

.parent {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 }
Copy the code

4. Properties of diagram subitems

4.1 the order attribute

Define the order of the children

.child{order:[integer] /* Incoming integer, default 0 */}Copy the code

The flex – turns up properties

Defines the proportion of child items that stretch when the sum of their widths is less than the width of their parent elements

.child{flex-grow:[number] // Pass a number}Copy the code

4.2 the flex – the shrink properties

Defines the scale of children when the sum of their widths exceeds the width of the parent element

.child{flex-shrink:[number] /* Incoming number, default 1*/}Copy the code

Description:

The default flex-shrink value is 1, and the browser shrinks the excess space at a rate calculated by adding the shrink factors. The figure 4 defines Flex-shrink :2, and the other subitems define Flex-shrink :1, so that you can see that the remaining space is divided into six units, four units of one and one unit of two, that is, 1:1:1:2:1.

We define the width of the parent to be 800px and the width of the children to be 250px. The five children add up to 1250px and exceed the parent by 450px. So the extra 450px has to be digested by these five subitems.

According to the shrinkage factor, the weighted synthesis can be 250*1+250*1+250*1+250*2+250*1=1500px; Then we can calculate how much overflow the subitems will be removed:

If the contraction factor is 1, the amount of spillover removed is :(250*1/1500)*450, equal to 75px

If the contraction factor is 2, the amount of overflow removed is :(250*2/1500)*450, i.e., approximately equal to 150px

The actual widths were 250-75=175px and 250-150=100px

4.3 the flex – the basis of attributes

Defines the initial widths of the children, which are scaled flex-basis if the sum of their widths exceeds the width of the parent element

.child{
  flex-basis: [length] | [percentage]  | auto; /* default auto*/
}
Copy the code

instructions:

The default value of Flex-basis is auto (no specific width value, depending on other attribute values), and the browser shrinks the excess space in proportion to the value of each basis subterm.

In the figure 5, flex-basis is defined as 400px, and the other children are defined as Flex-basis as 200px. We define the parent container width as 800px, and the sum of the five children will be 1200px, 400px more than the parent container. So this extra 400px has to be digested by these five subterms.

The ratio of these 5 subitems is 1:1:1:1:2, so the extra 400px will be divided into 6 parts, so we can calculate how much overflow will be removed from the subitems:

Flex-basis 400px, removed overflow: 400/6*2, i.e., approximately 133.33px

The flex-basis is 200px, and the overflow is removed: 400/6*1, i.e. approximately 66.67px

The actual widths were: 400-133.33=266.67px, 200-66.67=133.33px

Flex-basis :[percentage] Is similar to the calculation method of [length]

4.4 the flex property

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.

4.5 the align – self attribute

Defines the alignment of a single subitem that differs from other items

The align-self property allows a single item to have a different alignment than other items, overriding the parent’s align-items property. The default value is auto, which inherits the align-items property of the parent container. If there is no parent container, it equals to stretch.

In the legend, the parent set align-items:flex-start, and then we set align-self:flex-end for 5 alone.

Reference:

www.ruanyifeng.com/blog/2015/0… Developer.mozilla.org/zh-CN/docs/… www.css88.com/book/css/pr…