zoukankan      html  css  js  c++  java
  • css:flex



    <
    div class="div1"> <div class="block" style="background:#f00">item1</div> <div class="block" style="background:#ffc107">item2</div> <div class="block" style="background:#607d8b">item3</div> </div>

    flex-direction: row;

     .div1{
          display: flex;
          flex-direction: row;
     }
     .block{
          flex:auto;
          height:200px;
     }

    显示:

    flex-direction: column;

            .div1{
                display: flex;
                flex-direction: column;
            }
            .block{
                flex:auto;
                height:200px;
            }
    

      显示:

    flex-direction: row-reverse;

           .div1{
                display: flex;
                height:200px;
                flex-direction: row-reverse;
            }
            .block{
                flex:auto;
               
            }    
    

      显示

     flex-direction: column-reverse;

            .div1{
                display: flex;
                height:200px;
                flex-direction: column-reverse;
            }
            .block{
                flex:auto;  
            }
    

      

    显示

     
     
    flex-wrap: nowrap | wrap | wrap-reverse;
    nowrap 指的是在一行显示不换行;
    wrap 指的是多行显示;
    wrap-reverse 指的是多行显示,但是跟规定排列方向相反;
     
    justify-content: flex-start | flex-end | center | space-between | space-around;
     
            .div1{
                display: flex;
                height:200px;
                width:500px;
                flex-direction: row;
                background:#555;
           justify-content: flex-start; } .block{ flex:0 0 30%; }

            .div1{
                display: flex;
                height:200px;
                500px;
                flex-direction: row;
                background:#555;
                justify-content: center;
            }
            .block{
                flex:0 0 30%; 
            }
    

      

            .div1{
                display: flex;
                height:200px;
                width:500px;
                flex-direction: row;
                background:#555;
                justify-content: space-between;
            }
            .block{
                flex:0 0 30%; 
            }

           .div1{
                display: flex;
                height:200px;
                width:500px;
                flex-direction: row;
                background:#555;
                justify-content: space-around;
            }
            .block{
                flex:0 0 30%; 
            }    

            .div1{
                display: flex;
                height:200px;
                width:500px;
                flex-direction: row;
                background:#555;
                justify-content: flex-end;
            }
            .block{
                flex:0 0 30%; 
            }

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;

            .div1{
                display: flex;
                height:400px;
                500px;
                flex-direction: row;
                flex-wrap: wrap;
                background:#555;
                justify-content:center;
                align-content: flex-end;
            }
            .block{
                flex:0 0 30%; 
                height:100px;
            }
            
    

       

            .div1{
                display: flex;
                height:200px;
                500px;
                flex-direction: row;
                flex-wrap: wrap;
                background:#555;
                justify-content:center;
                align-content: center;
            }
            .block{
                flex:0 0 30%; 
                height:50px;
            }
    

      

            .div1{
                display: flex;
                height:200px;
                width:500px;
                flex-direction: row;
                flex-wrap: wrap;
                background:#555;
                justify-content:center;
                align-content: stretch;/*项目高度不是固定值*/
            }
            .block{
                flex:0 0 30%;
            } 

    align-items是在所有项目上的对齐方式。
    align-self是在单独的项目上的对齐方式。
    align-items: flex-start | flex-end | center | baseline | stretch;
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
            .div1{
                display: flex;
                height:400px;
                width:500px;
                flex-direction: row;
                flex-wrap: wrap;
                background:#555;
                justify-content:center;
                align-items: flex-end;
            }
            .block{
                flex:0 0 30%; 
                min-height: 100px;
                max-height: 300px;
            }
            .block:nth-child(2){
                max-height: 200px; 
                
            }

            .div1{
                display: flex;
                height:400px;
                width:500px;
                flex-direction: row;
                flex-wrap: wrap;
                background:#555;
                justify-content:center;
               /* align-items: flex-end;*/
            }
            .block{
                flex:0 0 30%; 
                min-height: 100px;
                max-height: 300px;
            }
            .block:nth-child(2){
                max-height: 200px; 
                align-self: flex-start
                
            }

            .div1{
                display: flex;
                height:400px;
                width:500px;
                flex-direction: row;
                flex-wrap: wrap;
                background:#555;
                justify-content:center;
                align-items: flex-start;
            }
            .block{
                flex:0 0 30%; 
                min-height: 100px;
                max-height: 300px;
            }
            .block:nth-child(2){
                max-height: 200px; 
               /* align-self: flex-start*/
                
            }

            .div1{
                display: flex;
                height:400px;
                width:500px;
                flex-direction: row;
                flex-wrap: wrap;
                background:#555;
                justify-content:center;
                align-items: center;
            }
            .block{
                flex:0 0 30%; 
                min-height: 100px;
                max-height: 300px;
            }
            .block:nth-child(2){
                max-height: 200px; 
               /* align-self: flex-start*/  
            }

            .div1{
                display: flex;
                height:400px;
                width:500px;
                flex-direction: row;
                flex-wrap: wrap;
                background:#555;
                justify-content:center;
               /* align-items: center;*/
            }
            .block{
                flex:0 0 30%; 
                min-height: 100px;
                max-height: 300px;
            }
            .block:nth-child(2){
                max-height: 200px; 
                align-self: center
            }

            .div1{
                display: flex;
                height:400px;
                width:500px;
                flex-direction: row;
                flex-wrap: wrap;
                background:#555;
                justify-content:center;
                align-items: baseline;
            }
            .block{
                flex:0 0 30%; 
                min-height: 100px;
                max-height: 300px;
            }
            .block:nth-child(2){
                max-height: 200px; 
               /* align-self: center*/
            }

     

    float clear vertical-align 在flex布局里里面无效。

  • 相关阅读:
    居中
    redis之列表操作及在django中操作等相关内容-124
    模型类序列化器ModelSerializer的使用等相关内容-84
    序列化类Serializer的基础使用等相关内容-83
    redis的基础使用等相关内容-123
    django框架前后端混合项目之子评论、后台管理页面富文本编辑器、修改头像、修改密码等相关内容-81
    vue框架前后端分离项目之短信验证码、登录、注册接口及前端登陆注册功能等相关内容-122
    web开发模式及drf的介绍等相关内容-82
    django框架前后端混合项目之侧边栏及点赞点踩功能等相关内容-80
    django框架前后端混合项目之首页轮播图、主页、后台管理、头像显示等相关内容-79
  • 原文地址:https://www.cnblogs.com/yewook/p/8505904.html
Copyright © 2011-2022 走看看