Flex layout

Flex stands for “flexible layout” and any container can be specified as a Flex layout to provide maximum flexibility to the box model. Note: After the Flex layout is set, the Float layout of the child elements is invalid

Flex compatibility

Flex Basic Concepts

Elements with Flex layouts are called containers, and if you add display: Flex to a label, that label is a container.

By default, there are two axes in a Flex container, as shown in the figure above, main Axis and cross Axis, and who is the horizontal axis and who is the cross axis depends on the direction of the axes. The cross axis is perpendicular to the main axis.

Each unit block in the container is called a Flex item, or Flex item. Flex items must be direct children, arranged along the main axis by default. Note: Flex layouts can be nested

Flex container Properties

1. Flex-direction (this property determines the orientation of the spindle, i.e. the alignment of the items)

   flex-direction: row | row-reverse | column | column-reverse
Copy the code

Default: Row the main axis is horizontal from left to right

Row-reverse: The main axis moves horizontally from right to left

Column: The main axis is vertical from top to bottom

Column-reverse: the main axis is vertical from bottom to top

2. Flex-wrap (this property determines whether the items in the container are newlines)

   flex-wrap: nowrap | wrap | wrap-reverse;
Copy the code

Default: Nowrap no line feed When space runs out, items are resized so they don’t squeeze into the next line

Wrap: line breaks when the total size of the item spindle exceeds the container, with the first line on top

Wrap-reverse: a line feed when the total size of the item spindle exceeds the container, with the first line below

3. Flex-flow (hybrid shorthand for flex-direction + flex-wrap)

   flex-flow: <flex-direction> || <flex-wrap>;
Copy the code

The default value is: Row Nowrap. This property does not need to be remembered

4. Inter-content (this property defines how the project will be aligned on the spindle)

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

This legend is built on the horizontal axis default value: flex-start left aligned

Flex-end: Right alignment

Center: a center

Space-between: Aligns the items at both ends and the space between items is equal

Space-around: Each project is equally spaced on both sides, and the space between the projects is twice as large as the space between the projects and the border

5. Align-items (this property defines how items are aligned on cross axes)

   align-items: flex-start | flex-end | center | baseline | stretch;
Copy the code

Default value: Stretch If the project is not set to height or set to auto, it will take up the entire container height

Flex-start cross axis start alignment

Flex-end: Cross axis end alignment

Center: Aligns the midpoint of the cross axis

Baseline: Baseline alignment of the first line of text in the project

6. Alt-content (this property defines the alignment of multiple axes)

Note: This property does not work if the project has only one axis

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

When flex-wrap is set to nowrap, the project does not wrap lines, so the container has only one axis. When flex-wrap is set to wrap, the container has multiple axes. You need to use align-content to set the alignment of multiple axes. This legend is set on the horizontal axis. Flex-start is used as an example, and for other items, see justify-content & align-items

Flex Project Properties

1. Order (this property defines the order in which items are placed in the container. The smaller the value, the higher the order. The default value is 0)

    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 100px;
        height: 100px;
        background-color: #e5eaf0;
    }
    .item{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
        width: 80px;
        color: #fff;
        font-size: 16px;
        border-radius: 10px;
        background-color: #7f71fe;
    }
    <div class="container">
        <div class="item" style="order: 5;">item1</div>
        <div class="item" style="order: 4;">item2</div>
        <div class="item" style="order: 6;">item3</div>
        <div class="item" style="order: 1;">item4</div>
        <div class="item" style="order: -1;">item5</div>
    </div>
Copy the code

In the HTML structure, item5 is at the bottom of the list, but because of the order set separately, item5 has the smallest order to get to the top.

2. Flex-grow (this property defines the scale at which the project can be enlarged. The default is 0.

    <div class="container">
        <div class="item" style="flex-grow: 1;">item1</div>
        <div class="item" style="flex-grow: 1;">item2</div>
        <div class="item" style="flex-grow: 1;">item3</div>
    </div>
Copy the code

If all projects have flex-grow property of 1, all projects will divide the remaining space equally if there is any.

    <div class="container">
        <div class="item" style="flex-grow: 1;">item1</div>
        <div class="item" style="flex-grow: 2;">item2</div>
        <div class="item" style="flex-grow: 1;">item3</div>
    </div>
Copy the code

If a project has all flex-grow properties of 2 and all others are 1, the flex-grow project with 2 takes up twice as much remaining space as the other projects.

3. Flex -shrink (this property defines the scale by which the project can be shrunk. The default is 1, and the project will shrink if there is not enough space left)

    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 100px;
        height: 100px;
        width: 500px;
        background-color: #e5eaf0;
    }
    .item{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
        width: 200px;
        color: #fff;
        font-size: 16px;
        border-radius: 10px;
        background-color: #7f71fe;
    }
    <div class="container">
        <div class="item" style="flex-shrink: 1;">item1</div>
        <div class="item" style="flex-shrink: 0;">item2</div>
        <div class="item" style="flex-shrink: 1;">item3</div>
    </div>
Copy the code

As you can see in the code, each project itself is set to 200px, but the overall container width is only 500px. When the flex-shrink property of the project is set to 1, the space shortage will be scaled back equally. When the flex-shrink property is set to 0, it will not be scaled back.

4. Flex-basis (this property defines how much space the project occupies on the main axis before allocating extra space. The browser uses this property to calculate whether there is extra space on the main axis)

   .item{
        flex-basis: <length> | auto;
    }
Copy the code

The flex-basis attribute is used to set the width of the element when it is a numeric value. Width can also be set, but both Flex-basis and width exist in the same element, so the width value is overridden by the flex-basis value when the flex-basis value is auto, If the size is set to, say, 200px, the 200px will not be included in the remaining space.

Flex (this property is short for Flex-grow, Flex-shrink, and Flex-basis)

Note: It is recommended to use this attribute first rather than write the three attributes separately, as the browser will calculate the values

   .item{
        flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]}Copy the code

The default values for Flex are a combination of the above three properties. If the above three properties are also default values, then flex defaults to 0 1 Auto. Shortcut values: auto(1 1 auto) and None (0 0 auto)

1). When the flex value is a non-negative number, the number is the flex-grow value

  .item {flex: 1; } = .item { flex-grow:1;
                            flex-shrink: 1;
                            flex-basis: 0%;
                           }
Copy the code

2). When flex is 0, the corresponding flex-grow value is 0

  .item {flex: 0; } = .item { flex-grow:0;
                            flex-shrink: 1;
                            flex-basis: 0%;
                           }
Copy the code

3). When the flex value is a length or percentage, the value is the flex-basis value

  .item {flex: 0%; } = .item { flex-grow:1;
                            flex-shrink: 1;
                            flex-basis: 0%;
                           }
  .item {flex: 200px; } = .item { flex-grow:1;
                            flex-shrink: 1;
                            flex-basis: 200px;
                            }
Copy the code

4). When flex has two non-negative values, the values are not flex-grow or Flex-shrink

  .item {flex: 2.3; } = .item { flex-grow:2;
                            flex-shrink: 3;
                            flex-basis: 0%;
                           }
Copy the code

5). When flex is a non-negative number and a length or percentage, these two values are not flex-grow or flex-basis values

  .item {flex:5,30px; } = .item { flex-grow:5;
                            flex-shrink: 1;
                            flex-basis: 30px;
                           }
Copy the code

6. Align-self (this property allows individual items to be aligned differently than other items)

When this attribute is defined for a single item, the align-items attribute is overridden. The default value is Auto, which means that the align-items attribute is inherited from the parent element. If there is no parent element, it equals stretch

  .item {
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
Copy the code

The effect is the same as that of the align-items, except that the align-self only works for a single item. For example, the left and right items are set to flex-start, and the middle item is set to flex-end

    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 100px;
        height: 200px;
        width: 500px;
        background-color: #e5eaf0;
    }
    .item**{**
        display: flex;
        justify-content: center;
        height: 80px;
        width: 80px;
        color: #fff;
        font-size: 16px;
        border-radius: 10px;
        background-color: #7f71fe;
    }
    <div class="container">
        <div class="item" style="align-self: flex-start;">item1</div>
        <div class="item" style="align-self: flex-end;">item2</div>
        <div class="item" style="align-self: flex-start;">item3</div>
    </div>
Copy the code

Learn Flex Layout in 30 Minutes by Lin Dongzhou

Flex layout

Flex layout

Flex compatibility

Flex Basic Concepts

Flex container Properties

1. Flex-direction (this property determines the orientation of the spindle, i.e. the alignment of the items)

2. Flex-wrap (this property determines whether the items in the container are newlines)

3. Flex-flow (hybrid shorthand for flex-direction + flex-wrap)

4. Inter-content (this property defines how the project will be aligned on the spindle)

5. Align-items (this property defines how items are aligned on cross axes)

6. Alt-content (this property defines the alignment of multiple axes)

Flex Project Properties

1. Order (this property defines the order in which items are placed in the container. The smaller the value, the higher the order. The default value is 0)

2. Flex-grow (this property defines the scale at which the project can be enlarged. The default is 0.

3. Flex -shrink (this property defines the scale by which the project can be shrunk. The default is 1, and the project will shrink if there is not enough space left)

4. Flex-basis (this property defines how much space the project occupies on the main axis before allocating extra space. The browser uses this property to calculate whether there is extra space on the main axis)

Flex (this property is short for Flex-grow, Flex-shrink, and Flex-basis)

6. Align-self (this property allows individual items to be aligned differently than other items)

Related Posts

Webpack 4 incomplete migration refers north

Recommended collection | this UI artifact, I really do love!

Vue-router Summary of knowledge points