/*設定flex布局
*/display:-webkit-box;/*
android 2.1-3.0, ios 3.2-4.3
*/display:-webkit-flex;/*
chrome 21+
*/display:-ms-flexbox;/*
wp ie 10
*/display:flex;/*
android 4.4
*/
/*設定方向
*/-webkit-box-orient:vertical;/*
android 2.1-3.0, ios 3.2-4.3
*/-webkit-flex-direction:column;/*
chrome 21+
*/-ms-flex-direction:column;/*
wp ie 10
*/flex-direction:column;/*
android 4.4
*/
/*子元素自動佔據剩餘的空間
*/-webkit-box-flex:1;/*
android 2.1-3.0, ios 3.2-4.3
*/-webkit-flex:1;/*
chrome 21+
*/-ms-flex:1;/*
wp ie 10
*/flex:1;/*
android 4.4
*/
/*子元素 水平居中
*/-webkit-box-pack:center;/*
android 2.1-3.0, ios 3.2-4.3
*/-webkit-justify-content:center;/*
chrome 21+
*/-ms-flex-pack:center;/*
wp ie 10
*/justify-content:center;/*
android 4.4
*/
/*水平布局下的子元素 垂直居中
*/-webkit-box-align:center;/*
android 2.1-3.0, ios 3.2-4.3
*/-webkit-align-items:center;/*
chrome 21+
*/-ms-flex-align:center;/*
wp ie 10
*/align-items:center;/*
android 4.4
*/
/*水平布局下的子元素 2端對齊
*/-webkit-box-pack:justify;/*
android 2.1-3.0, ios 3.2-4.3
*/-webkit-justify-content:space-between;/*
chrome 21+
*/-ms-flex-pack:justify;/*
wp ie 10
*/justify-content:space-between;/*
android 4.4
*/
微信小程式 flex布局
flex布局的特點 伸縮容器 使用display block 預設值 的 flex row style display block flex view item 1 view flex view item 2 view flex view item 3 view view 可以從效果圖看到block...
微信小程式之flex布局
flex布局 flex布局的特點 設有display flex或者display block的元素就是乙個flex container 伸縮容器 裡面的子元素稱為flex item 伸縮專案 flex container中子元素都是使用flex布局排版。display flex 指定為行內容器模式，...
微信小程式開發 Flex布局
flex布局的特點 設有display flex或者display block的元素就是乙個flex container 伸縮容器 裡面的子元素稱為flex item 伸縮專案 flex container中子元素都是使用flex布局排版。display flex 指定為行內容器模式，在一行內顯示子...