css3中flex怎么實現div內容水平垂直居中

這篇文章給大家分享的是有關css3中flex怎么實現div內容水平垂直居中的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一、flex-direction: （元素排列方向）

※ flex-direction:row （橫向從左到右排列==左對齊）

※ flex-direction:row-reverse （與row 相反）

 ※ flex-direction:column （從上往下排列==頂對齊）

※ flex-direction:column-reverse （與column 相反）

二、flex-wrap: （內容一行容不下的時候才有效）

※flex-wrap:nowrap （超出不換行，很奇怪里面的寬度會變成100%）

※ flex-wrap:wrap （超出按父級的高度平分）

※flex-wrap:wrap-reverse（與wrap 相反）

三、justify-content: （水平對齊方式）

※flex-start （水平左對齊）

※ justify-content:flex-end; （水平右對齊）

※ justify-content:center;（水平居中對齊）

※justify-content:space-between; （兩端對齊）

※justify-content:space-around; （兩端間距對其）

四、align-items: （垂直對齊方式）

※ align-items:stretch; （默認）

※align-items:flex-start; （上對齊，和默認差不多）

※align-items:flex-end; （下對齊）

※ align-items:center;（居中對齊）

=※align-items:baseline; （基線對齊）

如彈性盒子元素的行內軸與側軸（縱軸）為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。

flex容器屬性

/*1.方向*/
        /*默認方向（row正方向）*/
        /* flex-direction: row; */
        /*row反方向*/
        /* flex-direction: row-reverse; */
        /*columnz正方向*/
        /*flex-direction: column;*/
        /*columnz反方向*/
        /*flex-direction: column-reverse;*/

        /*2.換行*/
        /*flex-wrap: wrap;*/
        /*flex-wrap: wrap-reverse;*/

        /*3.direction+wrep組合*/
        /*flex-flow: row wrap-reverse;*/

        /*4.主軸對齊*/
        /*起點左對齊*/
        /*justify-content: flex-start;*/
        /*起點右對齊*/
        /*justify-content: flex-end;*/
        /*起點居中對齊*/
        /*justify-content: center;*/
        /*間隔左右分散*/
        /*justify-content: space-between;*/
        /*間隔內邊距相等*/
        /*justify-content: space-around;*/
        /*間隔相等*/
        /*justify-content: space-evenly;*/
        
        /*5.交叉軸對齊 當flex-direction: row;修飾y軸, 當flex-direction: column;修飾x軸*/
        /*默認交叉軸對齊*/
        /*align-items: stretch;*/
        /*默認交叉軸居中*/
        /*align-items: center;*/
        /*默認交叉軸上對齊*/
        /*align-items: flex-start;*/
        /*默認交叉軸下對齊*/
        /*align-items: flex-end;*/
        /*默認交叉軸內容對齊*/
        /*align-items: baseline;*/

        /*6.多行交叉軸對齊*/
        /*align-content: stretch;*/
        /*多行交叉軸居中對齊*/
        /*align-content: center;*/
        /*多行交叉軸上對齊*/
        /*align-content: flex-start;*/
        /*多行交叉軸下對齊*/
        /*align-content: flex-end;*/
        /*多行交叉軸內邊距相等*/
        /*align-content: space-around;*/
        /*多行交叉軸間隔左右分散*/
        /*align-content: space-between;*/
        /*多行交叉軸間隔相等*/
        /*align-content: space-evenly;*/

flex項目屬性

/*1.控制項目次序*/
        /*order: 2;*/
        /*2.按比例擴大空間，數越大空間越大，0值不擴大*/
        /*flex-grow: 2;*/
        /*3.按比例縮小空間，數越大空間越小，0值不壓縮*/
        /*flex-shrink: 2;*/
        /*4.需要flex-direction配合使用，row=寬 column=高，并且優先級高于width hight, auto值 讓位優先級*/
        /*flex-basis: 600px;*/
        /*5.flex=grow+shrink+basis*/
        /*grow =1 && shrink = 1 && basis = auto*/
        /*flex: auto;*/
        /*grow =0 && shrink = 1 && basis = auto*/
        /*flex: initial;*/
         /*grow =0 && shrink = 0 && basis = auto*/
        /*flex: none;*/
        /*6.align-self覆蓋容器的align-items*/
        /*align-self: flex-start;*/

感謝各位的閱讀！關于“css3中flex怎么實現div內容水平垂直居中”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！