flex layout usage

1. What is flex layout?

Flex is the abbreviation of flexible Box, which means "elastic layout". It is used to provide maximum flexibility for box model. Any container can be specified as flex layout. Flex layout is also called telescopic layout, elastic layout, telescopic box layout and elastic box layout.

2.flex layout principle?

When we set the flex layout for the parent box, the float, clear and vertical align attributes of the child elements will be invalidated. Elements with flex layout are called flex container, or "container" for short. All its child elements automatically become container members, called flex items, or "projects". Flex layout is to control the position and arrangement of child boxes by adding flex attributes to the parent box.

3. Suggestions on using flex layout

The browser support on the pc side is poor, and the mobile side is widely used. If it is the page layout on the pc side, it is still the traditional way. If it is the page layout on the pc side, it is still the traditional way.

4. Usage:

4.1 preparation code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  * {margin:0;padding:0;}
  .container {
    width: 500px;
    height: 300px;
    background-color: skyblue;
    margin: 100px auto;
  }
  .item {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color:white;
  }
  .item1 {
   background-color: red;
  }
  .item2 {
   background-color: green;
  }
  .item3 {
   background-color: blue;
  }

  </style>
</head>
<body>
    <div class="container">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
    </div>
</body>
</html>

4.2 common attributes of parent container

4.2.1 the flex layout is divided into the common attributes of the parent container and the common attributes of the sub item (the attributes under 4.2 are set to the parent container).

4.2.2 flex direction: set the direction of the spindle. In the flex layout, it is divided into two directions: the spindle and the side axis. The same name is: row and column, x-axis and y-axis,

The default spindle direction is the x-axis direction, horizontal to the right, and the default side axis direction is the y-axis direction, horizontal to the down

Open flex layout display:flex for parent container;

Note: the main axis and side axis will change, depending on who is set as the main axis in flex direction, and the rest is the side axis. And our child elements are arranged along the main axis

Modify spindle direction: Flex direction

.container {
    width: 500px;
    height: 300px;
    background-color: skyblue;
    margin: 100px auto;
    display: flex;
    flex-direction: column;
  }

4.3 justify content sets the arrangement of child elements on the spindle

.container {
    ......Center alignment
    display: flex;
    justify-content: center;
  }

.container {
    ......Align tail
    display: flex;
    justify-content: end;
  }

.container {
    ......Divide the remaining space equally
    display: flex;
    justify-content: space-around;
  }

.container {
    ......Stick it on both sides first and divide the remaining space equally
    display: flex;
    justify-content: space-around;
  }

.container {
    ......Bisector space
    display: flex;
    justify-content: space-evenly;
  }

4.4 align items sets the arrangement of sub elements on the side axis (single line)

 display: flex;
 align-items:center;

4.5 whether to wrap lines in flex wrap settings

  • By default, projects are arranged on a single line (also known as a grid line). As defined by the flex wrap attribute, there is no newline in the flex layout by default.
  • nowrap does not wrap
  • Wrap wrap wrap
<body>
    <div class="container">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
    </div>
</body>

display: flex;
flex-wrap: wrap;

4.6 align content sets the arrangement mode (multiple lines) of child elements on the side axis

	display: flex;
    flex-wrap: wrap;
    align-content: space-between;

 	display: flex;
    flex-wrap: wrap;
    align-content: space-around;

4.3 common attributes of flex layout sub items

  • Align self controls how children are arranged on the side axis
  • The order attribute defines the order in which the children are arranged (before and after)
  • Shares of flex sub projects
  • Note that the above three attributes are designed for subprojects.

4.3.1 the align self attribute allows a single item to have a different alignment from other items, and can override the align items attribute.

The default value is auto, which inherits the align items attribute of the parent element

  .container {
   ......
    display: flex;
    align-items: center;
  }
  
  .item3 {
   background-color: blue;
   align-self: flex-end;
  }

4.3.2 the order attribute defines the order of items

The smaller the value, the higher the arrangement. The default value is 0.

Note: it is different from z-index.

 .item1 {
   background-color: red;
   order:1
  }
  .item2 {
   background-color: green;
   order:0
  }
  .item3 {
   background-color: blue;
   order:-1
  }

4.3.3 the flex attribute defines the remaining space allocated by the sub project, and the number of copies is represented by flex.

 .item1 {
     background-color: red;
     flex:1
  }
  .item2 {
     background-color: green;
     flex:2
  }
  .item3 {
     background-color: blue;
     flex:1
  }

Extended usage: an item can be a child of the parent container, and it can also be the parent container of its own item

.item1 {
   background-color: red;
  flex:1
  }
  .item2 {
   background-color: green;
   flex:2;
   display: flex;
  }
  .item3 {
   background-color: blue;
   flex:1
  }
  .left {
    background:orange;
    flex:1;
  }
  .right {
    background:purple;
    flex:3
  }

Tags: html5 html css

Posted on Sun, 19 Sep 2021 03:56:38 -0400 by icd_lx