css:flex

时间：2018-03-04 21:20:57 阅读：231 评论：0 收藏：0 [点我收藏+]

标签：AC end enter play ret pac ack base rect



<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

标签：AC end enter play ret pac ack base rect

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行