IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      深入理解H5培训学习中CCS弹性盒子flex布局

      • 发布时间:
        2019-10-16
      • 版权所有:
        云和教育
      • 分享:

      一、概念

      弹性盒子,是另外一种布局方式,想要让元素变成一个弹性盒子,只需要给元素一个display:flex属性即可,拥有display:flex的元素会变成一个容器,其子元素会变成这个容器中的项目。

      Flex兼容性: 在IE上兼容不好,但是在移动端兼容不是问题

      在使用弹性盒子的时候,容器中会存在主轴和副轴(交叉轴),一般情况下,主轴为横轴,副轴为纵轴,但是主轴和副轴可以通过flex-direction改变,项目会自动的在容器的主轴上排列

      有了flex之后就可以抛弃float布局了

      配图1 弹性盒子flex布局.jpg

      二、容器的六个属性

      flex-direction 调整主轴 (正常默认主轴是横轴,项目从左向右排列flex-start到flex-end)

      row 默认值

      row-reverse主轴为横轴,flex-start在右边,flex-end在左边

      column   主轴为纵轴,flex-start在上面,flex-end在下面

      column-reverse主轴为纵轴,flex-start在下面,flex-end在上面

      flex-wrap控制项目的换行

      nowrap不换行 (默认),如果项目总宽度大于容器总宽度,项目宽度会被压缩

      wrap换行 第一行在上方

      wrap-reverse换行,第一行在下面

      flex-flow是flex-direction和flex-wrap的符合属性

      flex-flow:column wrap

      justify-content控制了项目在主轴的排列方式

      flex-start项目顺序不变,左顶格(默认)

      flex-end项目顺序不变,右顶格

      center项目顺序不变,从中间开始

      space-around将剩余的空间等分,平分给每个项目左右两边

      space-between将每个项目之间的间隔设为相等,左右两个项目贴边

      space-evenly将每个项目之间的间距设置的完全一致

      align-items 控制了项目在副轴的排列方式

      flex-start居副轴的顶部,如果副轴有空间会把副轴的空间等分,所有的元素都在flex-start的位置

      flex-end居副轴的底部

      center居副轴的中间

      stretch如果在副轴上没有距离,那么默认拉伸为100%

      align-content只适用于有换行的项目

      flex-start从副轴的flex-start开始

      flex-end从副轴的flex-end开始

      center项目在容器的中间位置,如果在纵轴上有空间,只在所有的项目的上下部分有留白

      space-around将剩余的空间等分,平分给每行项目上下两边

      space-between将每行项目之间的间隔设为相等,上下两行项目贴边

      ustretch将每个项目之间的间距设置的完全一致

      项目的六个属性

      flex-grow 项目放大默认值为0

      放大后的宽度 = 原本宽度 + 空白宽度 / (所有grow的总值) * 设置的grow值

      如果没有空白宽度,设置flex-grow没有意义

      flex-shrink项目压缩 默认值为1

      最终宽度 = 项目本身宽度 – 需要压缩的宽度 / 总的shrink值 * 单个项目的shrink值

      flex-basis 项目在主轴占的空间

      默认值为1

      设置固定值,会将原有的 宽度/高度 变成设置的值

      这个属性只要存在就会覆盖原有的宽高

      flex复合属性

      felx是flex-grow  flex-shrink  flex-basis的复合属性

      默认值为flex: 0 1 auto

      felx:1  表示flex-grow是1,其余的值不变

      align-self当前项目在副轴的位置

      flex-start在副轴的顶部

      flex-end在副轴的底部

      center在副轴的中间

      order 当前项目的排列顺序

      默认值为0

      值越小越靠前,反之越靠后

      案例

      1、手机微信下方菜单布局

      配图2 弹性盒子flex布局.jpg

      2、文章详情中关于作者介绍

      配图3 弹性盒子flex布局.jpg

      3、骰子

      配图4 弹性盒子flex布局.jpg