码迷,mamicode.com
首页 > 其他好文 > 详细

flex弹性盒模型(容器块上的属性)

时间:2018-07-09 00:36:19      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:ems   排序   换行   tween   目的   star   ali   水平   bsp   

容器块上的属性:

             flex-direction:决定主轴方向

                    值row:(默认值)主轴为水平方向,起点在左端

                        row-reverse:水平方向,起点在右端

                       colum:垂直方向,起点在上沿

                       column-reverse:垂直方向,起点在下沿

 flex-wrap:换行规则

                    值nowrap(默认值)不换行

                        wrap:换行,第一行在上方

                      wrap-reverse:换行,第一行在下方

 

justify-content:设置项目在主轴上的对齐方式

                    值conter居中

                       fle-start:从起点开始排序

                      fle-end:从终点开始排序

                      space-between:两端靠边,剩余空间平分给项目之间的间距

                     space-around:剩余空间平分给每个项目的两侧

align-items:设置项目在交叉轴上的对齐方式

               值conter居中

                       fle-start:从起点开始排序

                      fle-end:从终点开始排序

                     stretch:项目高自动时,上下占满

                     baseline:项目中第一行文本基线对齐

align-content:多根主轴时的对齐方式

                 值conter居中

                       fle-start:与交叉轴起点对齐

                      fle-end:与交叉轴终点对齐

                     stretch:轴线占满整个交叉轴

                      space-between:与交叉轴两端对齐,轴线之间间隔平均分布

                     space-around:每根轴线两侧的间隔都相等

flex弹性盒模型(容器块上的属性)

标签:ems   排序   换行   tween   目的   star   ali   水平   bsp   

原文地址:https://www.cnblogs.com/qdxiaochong/p/9281781.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!