rect ear max str body play 9.png wrap center

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

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

        .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; 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布局裏裏面無效。

css:flex