Flex Flex layout

Flex layout experience

    div {
        display: flex;
        width: 80%;
        height: 300px;
        justify-content: space-around;
    }
    
    div span {
        /* width: 150px; */
        height: 100px;
        margin-right: 5px;
        flex: 1;
    }
    
Copy the code

2. Flex layout principles

Flex stands for Flexible Box

The child boxes in flex Containers are Flex items.

Parent box set to Flex layout, child element float, clear, vertical-align properties invalid!

How it works: Control the position and arrangement of child boxes by adding flex properties to parent boxes

3. Common properties of the Flex layout parent

  • Flex-direction: sets the spindle direction

    The flex - direction: row; /* Row */ flex-direction: column; /* The default y axis is horizontal down column*/Copy the code

  • Context-content: Sets the arrangement of child elements on the main axis (especially on the main axis)

    Justify -content: flex-start /end /center /space-around /space-betweenCopy the code

  • Flex-wrap: Sets whether a child element is wrapped on a line

    In Flex layouts, the default child element is a non-newline //wrap wrap

      flex-wrap: wrap;
Copy the code

  • Align-content: Sets the arrangement of child elements on the side axis (multiple lines) — no effect on a single line

    Align -content: flex-start(top to bottom)/end(bottom to top)/center(vertical center)/stretch(default value)/ space-between(space)/space-around(space)Copy the code

  • Align-items: Sets the arrangement of child elements on the side axis (single row)

    Align-items: flex-start(top to bottom)/end(bottom to top)/center(vertical center)/stretch(default value)Copy the code

  • Flex-flow: compound property, equivalent to setting both flex-direction and flex-wrap

    The flex - flow: the column wrap;Copy the code

4. Common properties of Flex layout subitems

  • Number of copies of Flex subproject (1. Remaining space 2. Number of copies)

    flex: <number>; /*default 0*/Copy the code

  • Align-self controls how the children align themselves on the side axis (understand, but interview will ask)

    Parent Flex adjusts the position of a child element uniformly, while align-self controls the position of a child element

      align-self: flex-end;
Copy the code

  • The order attribute defines the order of the child items. The default value is 0, and the lower the value, the higher the value

    */ order: -1;Copy the code

Rem adaptive layout

1. Rem

The REM unit (root EM) is a relative unit, just like em em is the parent element font, except that REM is based on the font size relative to HTML elements

For example, set font size=12px for the root element (HTML); Width: 2rem; If I change it to PX, it’s 24px

Comparison of the two:

  • Em relative to the font size of the parent element

  • Rem relative to the font size of the HTML element

  • The advantage of REM is that you can change the size of the elements on the page by changing the size of the text in the HTML

2. Media Query

@Media can set different styles for different screen sizes

Syntax specification:

@media mediatype and|not|only(media feature){
CSS-Code;
}
Copy the code

  • Mediatype Query type —– Divides different terminals into different types, called media types

    All for all devices/print for printers and print previews/screen for computer screens, tablets, smartphones, etc

  • Keyword: and to link multiple media types together /not exclude a media type /only Specifies a specific media type and can be omitted

  • (width/min-width/max-width)

    Media query can be changed according to different screen sizes and then different styles, from small to large more concise —- cascade

Note: “screen” and “and” must not be omitted

3. Media query + REM element dynamic size change

* { margin: 0; padding: 0; } / / @media screen and (min-width: 320px) {HTML {font-size: 50px; } } @media screen and (min-width: 640px) { html { font-size: 100px; } } div { height: 1rem; font-size: .5rem; background-color: green; color: #fff; text-align: center; line-height: 1rem; }Copy the code

4. Introducing resources (understanding)

Importing resources means invoking different CSS files for different screen sizes

<style> /* <! When our screen size is smaller than 640px, we want div to display a single */ /* </style> <link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)"> <link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">Copy the code

5. Less basis

1. Less is introduced

Less is an extension language of CSS and a preprocessor of CSS. Less is a CSS preprocessor language that extends the dynamic nature of CSS

2. Maintain the disadvantages of CSS, CSS selector is a headache, some labels to repeatedly write, inefficient and error-prone, now use less to write, just need to write again in accordance with the HTML DOM tree, and then add styles in the inside on the line

Such as:

.nav{
     .container{
                 ul{
                    li{
                        ...
                        a{
                            ...
                            &:hover{
				...
                               }
                        }
                  }
              }
        }
  }
Copy the code

3. Less compilation

  • The correct variable name @color: green;
  • Error variable name @1color @color~#
  • Variable names are case sensitive @color and @color are two different variables

4. Less + – * /

Note:

  • The 1px + 5 operator is separated by a space between the left and right
  • Two numbers are involved in the operation, and if only one number has a unit, the result is based on that unit
  • Two numbers are involved in the operation. If both numbers have units, and they have different units, the first unit prevails

Rem adaptation scheme

1. Rem actual development adaptation scheme

  • ① According to the design draft and device width ratio, dynamic calculation and set the size of HTML and tag font size (media query)

  • ② In THE CSS, the width, height, relative position and other values of design elements are converted into REM units in accordance with the same proportion

2. Adaptation plan 1 of REM actual development (based on 750px) is divided into 15 equal parts /20

The size of an element can be evaluated by:

  • ① Final formula: page element REM value = page element value (px)/(screen width/partition number)
  • ② Screen width/partition is the size of the HTML font size
  • Rem value = page element value (px)/HTML font size

3. Rem actual development adaptation 2 (reference to Flexable.js) — recommended

By default, the screen is divided into ten equal parts. After the application is introduced, you only need to set the font size of the HTML. The rest is calculated by flexable.js