flex布局

flex布局

一、flex布局案例

display:flex;
    
flex-direction: row;
    //&
    #x6392;
    &
    #x5E8F;
    &
    #x7684;
    &
    #x65B9;
    &
    #x5411;
    &
    #xFF0C;
    row&
    #x4EE3;
    &
    #x8868;
    &
    #x6A2A;
    &
    #x5411;
    &
    #x6392;
    &
    #x5217;
    &
    #xFF0C;
    column&
    #x4EE3;
    &
    #x8868;
    &
    #x7EB5;
    &
    #x5411;
    &
    #x6392;
    &
    #x5217;
    
justify-content: center;
    //&
    #x6392;
    &
    #x5217;
    &
    #x65B9;
    &
    #x5411;
    &
    #x7684;
    &
    #x5C45;
    &
    #x4E2D;
    
align-items: center;
    //&
    #x8868;
    &
    #x793A;
    &
    #x548C;
    &
    #x6392;
    &
    #x5217;
    &
    #x65B9;
    &
    #x5411;
    &
    #x5BF9;
    &
    #x5E94;
    &
    #x7684;
    &
    #x5782;
    &
    #x76F4;
    &
    #x65B9;
    &
    #x5411;
    &
    #x7684;
    &
    #x5C45;
    &
    #x4E2D;
    
flex-wrap: wrap;
    //&
    #x6362;
    &
    #x884C;
    

二、代码实战

新建 html 文件 12-flex.html ，编写下方程序，运行看看效果吧

&
    lt;
    !DOCTYPE html&
    gt;
    
&
    lt;
    htmllang=&
    quot;
    en&
    quot;
    &
    gt;
    
    &
    lt;
    head&
    gt;
    
        &
    lt;
    metacharset=&
    quot;
    UTF-8&
    quot;
    &
    gt;
    
        &
    lt;
    metahttp-equiv=&
    quot;
    X-UA-Compatible&
    quot;
    content=&
    quot;
    IE=edge&
    quot;
    &
    gt;
    
        &
    lt;
    metaname=&
    quot;
    viewport&
    quot;
    content=&
    quot;
    width=device-width, initial-scale=1.0&
    quot;
    &
    gt;
    
        &
    lt;
    title&
    gt;
    flex&
    #x5E03;
    &
    #x5C40;
    &
    lt;
    /title&
    gt;
    

        &
    lt;
    styletype=&
    quot;
    text/css&
    quot;
    &
    gt;

            .out-div{
    
                width:500px;
    
                height:600px;
    
                background-color: yellow;
    
                padding:15px;
    

                display: flex;
    
                flex-direction: row;
    
                align-items: center;
    
                justify-content: center;

            }

            .in-div{
    
                width:100px;
    
                height:100px;
    
                background-color: tomato;
    
                margin:15px;

            }
    
        &
    lt;
    /style&
    gt;
    
    &
    lt;
    /head&
    gt;
    
  
    &
    lt;
    body&
    gt;
    
        &
    lt;
    divclass=&
    quot;
    out-div&
    quot;
    &
    gt;
    
            &
    lt;
    divclass=&
    quot;
    in-div&
    quot;
    &
    gt;
    &
    lt;
    /div&
    gt;
    
            &
    lt;
    divclass=&
    quot;
    in-div&
    quot;
    &
    gt;
    &
    lt;
    /div&
    gt;
    
            &
    lt;
    divclass=&
    quot;
    in-div&
    quot;
    &
    gt;
    &
    lt;
    /div&
    gt;
    
        &
    lt;
    /div&
    gt;
    
    &
    lt;
    /body&
    gt;
    
  
&
    lt;
    /html&
    gt;
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！