display的flex属性使用详解

display的flex属性使用详解

flex的兼容性在pc端还算阔以,但是在移动端,那就呵呵了。今天我们只是学习学习,忽略一些不重要的东西。

首先flex的使用需要有一个父容器,父容器中有几个items.

父容器:container

属性: 

   display:flex;/*flex块级,inline-flex:行内快*/

   justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右;space-between:两边的向两边靠,中间等分;space-around:完美的平均分配*/

   align-items:stretch;/*center:垂直居中、flex-start:至顶、flex-end:至底、space-between、space-around*/  

   flex-direction: row;/*column从上向下的排列,column-reverse、row:从左到右,row-reverse:从右向左*/

   flex-wrap:wrap;/*wrap多行显示(父容器不够显示的时候,从上到下)、nowrap(当容器不够宽的时候,子元素会平分父容器的宽或者高)、wrap-reverse:从下向上*/

       /*flex-flow是flex-direction、flex-wrap的缩写*/

猜你喜欢

转载自blog.csdn.net/robinson_911/article/details/80380820
今日推荐