css:flex

时间：2018-03-04 20:32:36 阅读：210 评论：0 收藏：0 [点我收藏+]



<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;
            width: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%; 
        }

技术分享图片

        .div1{
            display: flex;
            height:400px;
            width: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;
            width: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;

        .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布局里里面无效。

css:flex

原文：https://www.cnblogs.com/yewook/p/8505904.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)