一、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內容水平垂直居中的幾種方法的文章就介紹到這了,更多相關css3div水平垂直居中內容請搜索萬仟網以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持萬仟網！

總結

以上是生活随笔為你收集整理的html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。