0507-Flex Box

A flexible box

1. Define a flexible box: define a flexible box on the parent element display: flex

2. Define the arrangement of child elements: flex-direction

3. Define the wrapping method of child elements: flex-wrap

4. Define the alignment of sub-elements: 1. Horizontal alignment: justify-content

②, vertical alignment: align-intems

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #a{
                width: 800px;
                height:400px;
                border: 1px solid #FFFF00;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
                
              }
              .a1 {
                  flex: 1;
                  border: #7FFF00 1px solid;
                  /*align-self: flex-start;*/
                  
              }
        </style>
    </head>
    <body>
        <div id="a">
            <div class="a1"></div>
            <div class="a1"></div>
            <div class="a1"></div>
            <div class="a1"></div>
            <div class="a1"></div>
                
            
        </div>
    </body>

2. Media inquiries

Display that adapts to changes in window or resolution

@media screen and (max-width: maximum width) and (min-width: minimum width)

<div id="aaa">
            Su Causeway Spring Dawn
        </div>




@media screen and (max-width:699px ) {
                    #aaa{
                        font-size: 8px;
                    }
                }
                   @media screen and (max-width: 999px) and (min-width: 799px) {
                       #aaa{
                           font-size: 12px;
                       }
                   }
                   @media screen and (max-width: 1199px) and (min-width: 1000px) {
                       #aaa{
                           font-size: 16px;
                       }
                   }
                    @media screen and (min-width:1200px ) {
                    #aaa{
                        font-size: 22px;}
                    }

Guess you like