flex

01. Elastic box

Flex (elastic box, expansion box)

  • CSS is another layout means, it is mainly used to complete the layout of the page instead of floating;
  • Flex makes elements elastic, allowing them to change with the size of the page;

1. Elastic container:

  • To use an elastic box, you must first set an element to be an elastic container

  • We set the elastic container with display

    Display: Flex is set to block-level elastic containers

    Display: Inline-flex is set to an elastic container within the line

2. Elastic elements

  • The children of an elastic container are elastic elements (elastic terms)

  • An elastic element can also be an elastic container

flex-directionSpecifies how the elastic elements in the container are arranged.

Optional value:

  • Row default, elastic elements are arranged horizontally in the container (left to right) – spindle from left to right

  • row-reverse

    The elastic elements in the container are arranged horizontally in reverse (right to left) – the principal axis is from right to left

  • column

    Vertical alignment of elastic elements (top down)

  • column-reverse

    Vertical alignment of elastic elements (from bottom to top)

Principal axis: The orientation of the elastic elements is called the principal axis.

Side axis: perpendicular to the main axis is called the side axis.

Attributes of elastic elements:

Flex-grow Specifies the stretch coefficient of an elastic element:

  • How children stretch out when the parent has extra space;
  • The remaining space of the parent element is allocated proportionally;

Flex-shrink specifies the shrink factor of an elastic element:

  • How to shrink child elements when there is not enough space in the parent element to hold all child elements;
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>* {margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 500px;
            border: 10px red solid;
            /* Set ul to elastic container */
            display: flex;
            flex-direction: row;
        }

        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            
        }
        li:nth-child(1) {flex-grow: 0;
            flex-shrink: 1;
        }

        li:nth-child(2) {background-color: pink;
            /* flex-grow: 2; * /
            flex-shrink: 2;
        }

        li:nth-child(3) {background-color: orange;
            /* flex-grow: 3; * /
            flex-shrink: 3;
        }
    </style>
</head>
<body>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>

</body>
</html>
Copy the code

Before the contract

After the contract

02. Flexible container style

flex-wrap:

Sets whether the elastic element wraps automatically in the elastic container. (Container width > element width)

  • Optional value:

    • Nowrap default value, element does not wrap;
    • The wrap element wraps automatically along the secondary axis;
    • The wrap-reverse element wraps a line in the opposite direction of the secondary axis;

justify-content

How to allocate white space on the spindle (how to arrange elements on the spindle)

  • Optional value:

    • Flex-start elements line up along the main axis;
    • Flex-end elements are arranged along the end edge of the main axis;
    • Center elements are centered;
    • Space-around whitespace is distributed on both sides of the element;
    • Space-between whitespace is evenly distributed among elements.
    • The space-instituted blank is evenly distributed on one side of the element;
<style>* {margin: 0;
        padding: 0;
        list-style: none;
    }

    ul{
        width: 800px;
        border: 10px red solid;
      /* Set ul to elastic container */
        display: flex;
        justify-content: center;
     }
    li{
        width: 200px;
        height: 100px;
        background-color: #bfa;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        flex-shrink: 0;    
    }
    /* li:nth-child(1){ } */

    li:nth-child(2) {background-color: pink;
    }

    li:nth-child(3) {background-color: orange;
    }
</style>
Copy the code

align-items

  • Sets how elements are aligned on the subaxis.

  • Sets the relationships between elements

    • Optional value:

      • Stretch Default value, sets the length of the element to the same value
      • Flex-start elements do not stretch and are aligned along the secondary axis
      • Flex-end is aligned along the end edge of the secondary
      • Center and align
      • Baseline alignment
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>* {margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 600px;
            height: 800px;
            border: 10px red solid;
          /* Set ul to elastic container */
            display: flex;
            /* flex-direction: column; * /
            /* flex-wrap: wrap-reverse; * /

            /* flex-flow: short for wrap and direction */
            flex-flow: row wrap;

            /* justify-content: center; * /
             /*align-items: flex-end; * /
             align-items: center;
             /*align-items: baseline; * /

             /* align-content: < span style = "box-sizing: border-box
             /*align-content: space-between; * /         
        }

        li{
            width: 200px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            flex-shrink: 0;

        }
        li:nth-child(1) {/* align-self: used to overwrite the align-items */ on the current elastic element
            align-self: stretch;
        }

        li:nth-child(2) {background-color: pink;
        }

        li:nth-child(3) {background-color: orange;
        }

        li:nth-child(4) {background-color: yellow;
        }

        li:nth-child(5) {background-color: chocolate;
        }
    </style>
</head>
<body>
     <ul>
         <li>1</li>
         <li>
             2
            <div>2</div>
         </li>
         <li>
             3
             <div>3</div>
             <div>3</div>
        </li>

        <li>4</li>

        <li>
                5
               <div>5</div>
            </li>
     </ul>

</body>
</html>
Copy the code

03. Styles of elastic elements

Flex-grow: a coefficient of increase in elasticity;

/* flex-grow: 1; * /

Flex-shrink The reduction factor of an elastic element;

  • The calculation method of reduction coefficient is complicated
  • The reduction is calculated based on the reduction factor and element size

flex-shrink: 1;

Flex-basis specifies the base length of the element along the main axis

This specifies the width of the element if the main axis is horizontal;

If the main axis is vertical, this value specifies the height of the element;

  • The default is auto, which indicates the height or width of the reference element itself
  • If a specific value is passed, that value prevails

Flex can set all three styles of an elastic element:

Flex growth shrinks base;

Initial = “flex: 0 1 auto”;

Flex: 1 1 auto;

None corresponds to” flex: 0 0 auto” The elastic element has no elasticity.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>* {margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 900px;
            border: 10px red solid;
            /* Set the elastic box */
            display: flex;
        
        }

        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;

            /* flex-grow: 1; * /

            /* flex-shrink: 1; * /

            /* flex-basis: auto; * /

            /* Flex can set all three flex styles for elastic elements to grow and shrink base; Initial "flex: 0 1 auto". Auto "flex: 1 1 auto" none "flex: 0 0 auto" Initial "flex: 0 1 auto"
            flex: initial;

        }
        li:nth-child(1) {/* Order determines the order of the elastic elements */
            order: 2;
        }

        li:nth-child(2) {background-color: pink;
            /* flex-grow: 2; * /
            order: 3;
        }

        li:nth-child(3) {background-color: orange;
            /* flex-grow: 3; * /
            order: 1;
        }
    </style>
</head>
<body>
    

     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>

</body>
</html>
Copy the code

04. Mobile page

In mobile terminal page development, screen sizes of different devices vary greatly, so pixel and viewport need to be considered for adaptation.

1. The pixels pixel

Screens are made up of pixels one by one;

You need to know the difference between CSS pixels and physical pixels.

CSS pixels are the design dimensions in the design draft; Physical pixels are the physical pixels of the screen.

When browsers display web pages, they need to convert CSS pixels to physical pixels before rendering them.

A CSS pixel is ultimately displayed in several physical pixels, determined by the browser: by default on the PC side, one CSS pixel = one physical pixel

2. The viewport viewport

  • Viewports are areas of the screen that display web pages;

  • You can view the size of the viewport to see the ratio of CSS pixels to physical pixels.

  • Default: Viewport width 1920px (CSS pixels) 1920px (physical pixels)

    • At this point, the ratio of CSS pixels to physical pixels is 1:1.

  • Double zoom: viewport width 960px (CSS pixels) 1920px (physical pixels)

    • At this point, the ratio of CSS pixels to physical pixels is 1:2.

  • We can change the ratio of CSS pixels to physical pixels by changing the viewport size.

On different display screens, the size per pixel is different, and the smaller the pixel, the sharper the screen.

24 inch 1920 x1080

Iphone6 4.7-inch 750 x 1334

A smartphone has far fewer pixels than a computer.

By default, mobile web pages will have viewports of 980 pixels (CSS pixels)

To ensure that the PC web page can be accessed properly on the mobile, but if the width of the page exceeds 980, the mobile browser will automatically zoom the page to display the full page.

So basically most PC side websites can be normally browsed in the mobile side, but often do not have a good experience.

To solve this problem, most websites design their pages specifically for mobile.

3. Perfect viewports

The default viewport size on mobile is 980px(CSS pixels),

By default, the mobile pixel ratio is 980/ mobile width (980/750);

If we write mobile code directly in a web page, the pixel ratio at 980 viewports is very bad, resulting in very, very small content in the web page;

When writing mobile pages, make sure you have a reasonable pixel ratio:

1css pixel corresponds to 2 physical pixels

1css pixel corresponds to 3 physical pixels

  • You can set the viewport size using the meta tag

Every mobile device is designed to have an optimal pixel ratio,

Generally we just need to set the pixel ratio to this value to get the best results;

The viewport size that sets the pixel ratio to the optimal pixel ratio is called a perfect viewport.

Device-width Specifies the width of the device (perfect viewport) :

<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
Copy the code

Add meta tags to HTML to set the perfect viewport.

    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <! Device-width specifies the width of the device -->
    <! -- <meta name="viewport" content="width=device-width"> -->
    <title>Document</title>
    <style>* {margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;

        }
    </style>
Copy the code

4. Vw adaptation

The size of the perfect viewport varies from device to device:

iphone6 — 375

iphone6plus — 414

Because viewports and pixel ratios vary from device to device, the same 375 pixels mean different things on different devices.

For example, on the iphone6, the 375 is full-screen, but on the plus, it’s missing one

So when you’re developing on mobile, you can’t use PX anymore. Vw is the viewport width.

  • 100vw = width of an viewport
  • 1vw = 1% viewport width

Vw is always calculated in units equal to the viewport width:

Use percentage widths to ensure consistent display on mobile terminals.

Do not use width: 20%;

Because % defaults to the width of the reference HTML, it is not convenient to use in parent-child situations.

Given the dimensions of the design: 750px 1125px

Width: 750px

Use vw as a unit: 100vw

Based on this, how do I create an element 48px by 35px?

100vw = 750px(pixels of the design)

0.1333333333333333 vw = 1 px

🥁6.4vw = 48px(design pixels)

Vw = 35 4.667 px

48 px will — — — – > 6.4 vw

<style>* {margin: 0;
        padding: 0;
    }
    .box1{
        width: 6.4 vw;
        height: 4.667 vw;
        background-color: #bfa;
    }
</style>
Copy the code

5. rem

When we write the mobile web page according to the design draft, we use vw method and need to calculate VW once for each design size, which is very inconvenient.


html{
    font-size:0.1333333 vw;
}
.box1{
    /* rem-1 rem = 1 HTML font size */
    width: 48rem;
    height: 35rem;
    background-color: #bfa;
}
Copy the code

In CSS, we can use the font size of 1 rem = 1 HTML to write the conversion relationship directly into the style of the HTML tag.

Note: The Chrome kernel browser currently displays the HTML properly, but older browsers will display too much of the HTML due to the default minimum font size: 12px.

One solution is to:

Multiply 0.13333333vw by a coefficient to make the HTML font size greater than 12px;

If you multiply it by 100, you get 13.333333vw = 100px;

1 rem = 13.333333 vw = 100 px.

When writing styles:

Write 50px –> 50/100rem.

05. Responsive layout

Responsive layout

  • Web pages can look different depending on different devices or window sizes;
  • With a responsive layout, you can make a web page work on all devices.
  • The key to response layout is thisMedia queries;
  • With media query, you can set styles for different devices or devices in different states.

Media queries

Grammar:

  • @mediaQuery rule {}
    • Media type:

      • All All devices

      • Print device

      • Screen A device with a screen

      • Speech screen reader

    • Can be used to concatenate multiple media types such that there is an or relationship between them

Note:

When used, you can add only to the front of the media type.

The use of only is mainly for compatibility with older browsers.

@media only screen {
    body{
        background-color: #bfa; }}Copy the code

Media properties:

  • Width Width of the viewport

  • Height Height of the viewport

  • Min-width Minimum viewport width (effective if viewport is larger than the specified width)

  • Max-width Maximum viewport width (effective when viewport is smaller than the specified width)

The cut-off point for style switching, we call it a breakpoint, that is, the point at which the style of the page will change.

< span style = “box-sizing: border-box! Important

> 768 — width=768px

Width =992px for medium screen

Width =1200px.

For example:

    <style>

         @media only screen and (min-width: 500px) and (max-width:700px) {body{
                background-color: #bfa; }}</style>
Copy the code

Place the page between 500px and 700px wide and set the body background color to # bfA.