Flex 常用布局

2018-11-13 07:32:24来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

1、flex布局

1.1  容器指定为flex布局

.box{display: flex;}

1.2 行元素指定flex布局

.box{display:inline-flex}

2、容器的属性

2.1、flex-direction 2.2、flex-wrap  2.3、flex-flow  2.4、justify-content  2.5、align-items  2.6、align-content

2.1 flex-direction属性 ——决定项目的排列方向

flex-direction: row; /*(默认值)水平方向,起点在左端*/
flex-direction: row-reverse;/*水平方向,起点在右端*/
flex-direction:column ;/*垂直方向,起点在上沿*/
flex-direction: column-reverse;/*垂直方向,起点在下沿*/

                                 

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:表头固定,表的主体设置滚动条

下一篇:博客园申请及页面定制CSS