zoukankan      html  css  js  c++  java
  • h5c3 part6 flex

    1. animation: name duration delay timing-function count forwards

    @keyframes name {
    0% === from{
    }
    100% === to{

    }
    }

    没有延迟
    animation-fill-mode: forwards 0%动画不会立即执行, 结束时会停留在结束状态
    backwards 0%动画会立即执行, 结束时不会停留在结束状态
    both 0%动画会立刻执行, 结束时会停留在结束状态

    2. 弹性布局

    1)开启弹性布局: 给父盒子 display: flex(使每一个子元素编=变成伸缩项)

    设置弹性布局属性: 给父盒子

    2) (主轴方向的对齐方式)justify-content: flex-start/flex-end/center(从哪里开始,子元素之间没有距离)


    space-around(将多余的宽度平均分配给每一个子盒子)

    space-between(间隔在两边)

    (侧轴方向的对齐方式)align-items: flex-start/flex-end/center
    stretch 拉伸
    base 基线对齐
    (给单个子元素设置) self-align:

    问题:子元素成为伸缩盒子之后,有一个问题是: 当子元素跨度大于父元素时, 子元素会平均缩放,直至能够同行显示,
    这种情况下, 子盒子自身设置的宽度都是无效的,所有需要flex-flow属性来让它换行

    3) (换行)flex-flow : 实质是flex-wrap 和 flex-direction的属性结合
    flex-wrap: 控制是否换行, 默认不换行
    wrap === 换行
    nowrap === 不换行
    wrap-reverse === 默认从上都下, 设置之后, 从下往上

    flex-direction: 默认是水平方向row
    row 主轴方向为x轴, 副轴为y轴
    column 垂直方向(当子元素高度和大于父元素高度时, 换列显示)
    column-reverse; 垂直排列方向, 从下往上

    4)可以联合写: flex-flow: wrap column; (实际应用分开写)

    5)flex 是 flex-gorw flex-shrink 的联合属性

      flex-grow:1; 默认值是0 设置给子元素 每个子元素设置的值不同,根据比例放大

      flex-shrink: 默认值是1 (所以如果设置为1,那么和其他盒子宽度还是一样) 按比例缩小

      flex:1; 占父盒子剩余空间;

  • 相关阅读:
    297.白盒测试
    301.多媒体讲台使用事项
    289.南信大知网登录
    296.deepin下载安装、root改密、cpu不降频、修改快捷键、创建启动器快捷方式、win文件访问、直接进win无deepin启动项
    295.博客园win&苹果PC客户端开源项目整理
    利用loganalyzer展示MySQL中rsyslog日志
    利用inotify和rsync实现数据的实时同步
    samba服务配置实践
    NFS服务配置实践
    FTP服务配置实践
  • 原文地址:https://www.cnblogs.com/noraZhang/p/10050940.html
Copyright © 2011-2022 走看看