flex-direction 決定元素排列方向
flex-direction:row||column
/*預設為row,方向為水平,元素的排列方向即為主軸*/
/*另外垂直的方向為交叉軸*/
flex-wrap：wrap；
/*預設排列不下時換行*/
flex-wrap：nowrap；
/*預設不換行*/
flex-wrap：wrap-reverse；
/*反轉，第一行放於下方，換行即往上換行*/
flex-flow：row wrap
/*先寫direction再寫wrap*/
justify-content：center；
/*主軸如何就相對於什麼對齊*/
justify-content：space-around；
/*如果存在多餘空間就等分，元素前邊空白*/
justify-content：space-between；
/*如果存在多餘空間，就在元素之間插空*/
justify-content：flex-start；
/*主軸的前端*/
justify-content：flex-end；
/*主叉軸的後端*/
align-items：flex-start；
/*交叉軸的前端*/
align-items：flex-end；
/*交叉軸的後端*/
align-items：center；
/*交叉軸的中間*/
align-items：stretch；
/*如果元素在交叉軸方向未填滿頁面且未設定該方向的長度，
則自動將元素佔滿交叉軸方向*/
/*其他與flex-start相似*/
align-items：baseline；
/*讓元素與元素內的文字機械對齊
/*其他與flex-start相似*/
flex-grow當有多餘空間時，元素的放大比例
flex-grow:0;
/*預設值為0，容器有多餘的容積時也不放大*/
flex-grow:1;
/*容器有多餘的容積時，該元素只佔據乙份*/
flex-grow:2;
/*容器有多餘的容積時，該元素佔據兩份*/
flex-shrink當空間不足時，元素的縮小比例
flex-shrink：1；
/*預設值為1，等比縮小*/
flex-shrink：0；
/*不縮小*/
flex-shrink：10；
/*被壓縮十倍*/
flex-basis元素在主軸上佔據的空間
flex-basis：250rpx；
/*需要以rpx為單位才行*/
rder定義元素的排列順序
align-self定義元素自身的對齊方式
微信小程式display 二 flex布局筆記
一 flex 彈性布局 dispaly flex 必須 1.主要容器屬性 用於布局 1 flex direction row row reverse column column reverse row 容器內的子專案從左到右橫著排列 row reverse 容器內的子專案從右到左橫著排列 colum...
小程式之flex
display flex容器的屬性 flex direction flex wrap flex flow justify content align items align content flex direction屬性決定主軸的方向 即專案的排列方向 box flex direction屬性 r...
display的flex屬性使用詳解
flex的相容性在pc端還算闊以，但是在移動端，那就呵呵了。今天我們只是學習學習，忽略一些不重要的東西。首先flex的使用需要有乙個父容器，父容器中有幾個items.父容器 container 屬性 display flex flex塊級，inline flex 行內快 justify conten...