• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
yangrui2018
博客园    首页    新随笔    联系   管理    订阅  订阅

弹性盒模型

弹性盒模型 

 在使用弹性盒模型时,父级要添加display:box或者display:inline-box

Box-orient定义盒模型的布局方向

  参数:Horizontal水平(默认)

          Vertical垂直

Box-direction元素的排列顺序

  参数:

       Normal正序

     Reverse倒序

Box-ordinal-group:设置元素的排序位置

  用法:

    在每一项上添加Box-ordinal-group:(number);

    从1开始计算依次往后排序分

Box-flex定义盒子的弹性空间

  用法:

    在每一项上添加Box-flex:(number);

    计算解析,将所有的数值相加,在用父级的宽度除以总数值,使他们平分

    如果box-flex的value值是像素值的话,就是用父级宽度减去这个像素值,再进行 平分

Box-pack对盒子的富裕空间管理

   参数:

    star所有元素在盒子的左边显示,富裕空间在右边显示

      End所有元素在盒子的右边显示,富裕空间在左边显示

        Center所有元素在中间显示,富裕空间平分两边

        Justify所有元素平均分布在盒子中

Box-align在垂直方向上对元素的位置进行处理

  参数:

    Star所有子元素在最顶

    End所有子元素在最低

    Center所有子元素在垂直居中

posted @ 2017-04-23 21:10  yangrui2018  阅读(144)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3