CSS flex 布局在移动端的应用
阅读(3245)flex 目前在移动端上大放光彩,用得非常频繁,所以记录一下。
注:下面parent代表父元素,child代表子元素
flex 等分
.parent{display: -webkit-box; display: -webkit-flex; display: flex;}
.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
flex 水平居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}
flex 垂直居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}
flex 水平垂直居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}