Web layout is an important aspect of CSS

Normal flow float + Clear position relative + Absolute display negative margin

These attributes are used in combination to achieve the desired page in a page layout, but for some specific layouts, the implementation is a bit cumbersome

1 Flex Layout

Flex stands for Flexible Box.

1.1 Flex layout features

  1. While block-level layouts are vertical and inline layouts are horizontal, Flex layouts are directional independent
  2. Flex layouts enable automatic space allocation, automatic alignment (flexible, flexible)
  3. Flex layouts are suitable for simple linear layouts, and Grid layouts are used for more complex layouts

1.2 Enabling Flex Layout

To turn on the Flex layout, just say display: Flex; , as follows:

.box{ display: flex; } // Inline elements can also be used. Box {display: inline-flex; } //Webkit kernel browser, need to prefix. Box {display: -webkit-flex; }Copy the code

1.3 Basic Concepts of Flex Containers

An element with a Flex layout can be thought of as a Flex container with properties as shown below:

flex-direction

2 Attributes of the parent element

The parent element of the Flex layout has six attributes that can be set:

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

2.1 the flex – direction

The flex-direction attribute determines the direction of the main axis (horizontal is the main axis, vertical is the side axis) and has four values:

Row: default, the main axis is horizontal from left to right; Row-reverse: the main axis is horizontal from right to left; Column: spindle is vertical from top to bottom; Column-reverse: the main axis is vertical from bottom to top

The schematic diagram is:

The code implementation effect is as follows:

2.2 the flex – wrap

By default, the child elements in a Flex container are placed on a single line, and if the total width of the child element is greater than the width of the parent element, the child element is compressed. The flex-wrap attribute sets a child element newline, which has three values:

Nowrap: default value, no newline wrap: newline, first line on top wrap: newline, first line on bottom

The schematic diagram is:

Code implementation effect diagram:

2.3 the flex – flow

The flex-flow attribute is a combination of flex-direction and flex-wrap. It writes the two attributes together, flex-direction first and flex-wrap second. The default value is row nowrap

Code implementation effect diagram:

2.4 the justify – content

The justice-content attribute defines the alignment of child elements on the main axis. It has five values:

Flex-start: default value, starting from the beginning flex-end: aligned from the end cneter: centered Space-between: aligned at both ends with equal spacing between child elements space-around: left and right spacing of each child element is equal

The schematic diagram is:

Code implementation effect diagram:

2.5 the align – items

The align-items property defines the alignment of child elements on the side axis. There are five values:

Flex-start: aligns child elements with the start of the side axis flex-end: aligns child elements with the end of the side axis Center: aligns child elements with the center of the side axis baseline: aligns child elements with the end of the side axis Baseline alignment based on the first line of text of the child element (highlight effect when font sizes are inconsistent)

Note: When this property is applied, the height of the child element should not be written to death, but should be supported by its contents

The schematic diagram is:

Code implementation effect diagram:

2.6 the align – content

The align-content property defines how the child element’s multiple axes are aligned on the lateral axis, and is only valid for multi-line displays. The following five values are mainly taken:

Flex-start: aligns with the starting point of the side axle. Flex-end: aligns with the end point of the side axle. Center: aligns with the middle point of the side axle. Space-around: The spacing between the two sides of each axis is equal

The schematic diagram is:

Code implementation effect diagram:

3 Attributes of child elements

The Flex layout’s child elements have six attributes that can be set:

flex-grow

flex-shrink

flex-basis

flex

order

align-self

3.1 the flex – turns up

The flex-grow attribute indicates the proportion of the remaining space allocated to each child element when the parent element has surplus space. The default value is 0, indicating no allocation. When is a value, it indicates the proportion of the remaining space of the parent element allocated to each child element, not the size proportion of the expanded child element

Code implementation effect diagram:

3.2 the flex – the shrink

The flex-shrink attribute has the opposite effect to the flex-grow attribute. It indicates the size of the child elements compressed when the total width of the child elements is greater than the width of the parent element and there is no newline display. The default value is 1, which indicates that the child elements are compressed equally. When the value is different, it represents the proportion of the size of each child element reduced by compression, not the proportion of the size of the child element after compression

Code implementation effect diagram:

3.3 the flex – basis

The flex-basis property can be used to set the size of the child element, which defaults to auto, representing the original size. If the parent element has free space, you can use this attribute to expand the space of the child element. If the sum of the space of each child element exceeds the space size of the parent element after expansion, the size of the child element is set according to the proportion of the flex-basis value. Without the flex-basis attribute, the default flex-basis value is the original size of the child element, so that the sum of the size of the child element cannot exceed the space size of the parent element

Code implementation effect diagram:

3.4 the flex

The flex attribute is a combination of flex-grow, flex-shrink, and Flex-basis. The default value is 0. 1 Auto

3.5 the order

The order attribute defines the order in which the child elements are sorted. The default value is 0, and the smaller the value, the higher the order

Code implementation effect diagram:

3.6 the align – self

The align-self attribute allows the child element to set its alignment separately, taking precedence over the align-items of the parent element. The default value is auto, which inherits the align-items of the parent element, or equivalent to stretch if there is no parent element. The following properties can be set:

Auto: inherits the parent element align-items stretch flex-start flex-end Center baseline

Except for the auto value, all values have the same effect as the align-items property of the parent element

4 Several Flex layouts

4.1 Top, middle and Bottom Layout


      
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body{
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    header{
      height: 100px;
      background: #ddd;
    }
    main{
      flex-grow: 1;
    }
    footer{
      height: 100px;
      background: #ddd;
    }
  </style>
</head>
<body>
<header>heafer</header>
<main>main</main>
<footer>footer</footer>
</body>
</html>
Copy the code

Code effect diagram:

4.2 scratchable latex


      
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>* {padding:0; }ul{
      list-style: none;
      border: 1px solid black;
      width: 170px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    li{
      width: 50px;
      height: 50px;
      border: 1px solid red;
      margin: 5px 0;
    }
  </style>
</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>
Copy the code

Code effect diagram:

4.3 General PC Layout


      
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body{
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    header{
      height: 50px;
      background: #ddd;
    }
    main{
      flex-grow: 1;
      display: flex;
    }
    .aside1{
      width: 100px;
      background: #aaa;
    }
    .aside2{
      flex-grow: 1;
    }
    .aside3{
      width: 100px;
      background: #aaa;
    }
    footer{
      height: 50px;
      background: #ddd;
    }
  </style>
</head>
<body>
<header>header</header>
<main>
  <aside class="aside1">aside1</aside>
  <aside class="aside2">aside2</aside>
  <aside class="aside3">aside3</aside>
</main>
<footer>footer</footer>
</body>
</html>
Copy the code

Code effect diagram:

4.4 Adaptive absolute center

Copy the code

Code effect diagram: