Since Nuggets don’t support HTML file format, you can go to my blog Flex layout and manually manipulate the Button button to get a better feel.

1. Traditional Layout (box model)

Display + float + position, the layout is not flexible

<div class="inline tradition">
    <div></div>
</div>
Copy the code
.tradition {
    margin:.5rem auto;
    margin-right:.3rem;
    width: 8rem;
    height: 5rem;
    background: #ccc;
    position: relative;
}
.tradition div {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1rem;
    margin-top: -1rem;
    width: 2rem;
    height: 2rem;
    background: darkorange;
}
Copy the code

Two, elastic box model

<div class=" flexbox">
    <div></div>
</div>
Copy the code
.flexbox {
    width: 8rem;
    height: 5rem;
    background: #ccc;
    display: flex;
}
.flexbox div {
    width: 2rem;
    height: 2rem;
    background: blue;
    margin: auto;
}
Copy the code

Containers and items

The container has two axes by default:

  • Horizontal main axis: The starting position of the main axis (where it intersects with the border) is called main start and the ending position is called main end;
  • Vertical cross axis: The starting position of a cross axis is called cross start and the ending position is called cross end.

By default, items are arranged along the main axis

  • The main space occupied by a single project is called main size,
  • The cross axial space occupied is called cross size.

4. Container properties

Create a new container, three items

<div class="bg container">
    <div class=" item item1">1</div>
    <div class=" item item2">2</div>
    <div class=" item item3">3</div>
</div>
Copy the code
.bg {
    background: #ccc;
    width: 10rem;
    height: 7rem;
    margin:.3rem;
}
.container {
    display: flex;
}
.item {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    font-size: 1rem;
}
.item1 {
    background: #f55;
}
.item2 {
    background: darkorange;
}
.item3 {
    background: #0f0;
}
Copy the code

1, flex-direction (change the spindle direction)

2. Justify -content (changes the way items are aligned in the main axis)

3. Align -items (the arrangement of items along the side axis)

4. Flex-wrap (if items are not aligned on an axis, whether to wrap them)

5, flex-flow (compound flex-direction with flex-wrap)

5. Project attributes

1. Order (items are ordered in the first place with the smallest value)

2. Flex-grow (percentage of the remaining space allocated by the child item)

The default value is 0: the container has free space and the children do not occupy any free space in the container

How are the children allocated: By giving the child that needs to be expanded a flex-grow property whose value is called a weight (without units), that is, the remaining container space will be allocated according to this weight

Calculation of flex-grow: for example, if the remaining space is X, the flex-grow of three elements is A, B, and C respectively. Let sum be a + b + c. So the three elements are going to be left with x * a/sum, x * b/sum, and x * c/sum

3. Flex-shrink (when the container space is insufficient, the items are shrunk to fit the limited space)

The default value is 1

The width of the container is 900px

If the parent element is 800px and the three child elements are set to 200px, 300px, and 400px respectively, the value of flex-shrink for the three child elements is 1,2,3. First, calculate how much the child element overflows: 200 + 300 + 400-800 = -100px The -100px will be compensated by the three elements shrinking by a certain amount. The weight of each element shrinking is flex-shrink multiplied by its width. So the total weight is 1 * 200 + 2 * 300 + 3 * 400 = 2000. The three elements shrink respectively: -100(overflow)* 1(Flex-shrink)* 200(width) / 2000 = -10-100 (overflow)* 2(Flex-shrink)* 300(width) / 2000 = -30-100 (overflow)* 3(flex-shrink) * 400(width) / 2000 = -60 The final width of the three elements is 200-10 = 190, 300-30 = 270, 400-60 = 340

4. Flex-basis (a substitute for width with a higher priority than width)

5. Align-self (allows a single item to be aligned differently from other items)

You can override the align-items property set by the container

Flex properties

A compound of the flex-grow flex-shrink flex-basis property

Probably the most useful property in the subitems