zoukankan      html  css  js  c++  java
  • FLEX弹性布局小结

    1. 弹性盒子中: flex: 0 1 auto表示什么意思
    flex默认三个参数是flex-grow, flex-shrink, flex-basis,默认值是0 1 auto。
    • flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大;
    • flex-shrink属性定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小;
    • flex-basis属性定义在分配项目占据的主轴空间,默认为auto。
    2. flex布局下的子元素高度问题
    • 当父元素没有设置高度时,其高度默认被最高子元素撑开,且其他元素默认横向主轴上的对齐方式(justify-content: flex-start);
    • 当父元素设置了高度时,其高度以此为准,不会受子元素高度影响。但子元素超出部分依旧显示,而且块级格式化上下文也是正常根据父元素进行排列,所以有可能造成重复排列的情况,被flex布局的元素所覆盖。如下图片:
    但如果父元素设置了高度,且设置了overflow:auto后,则超出部分则以滚动条形式展示。
    • 子元素的高度也可以自行设置,超出部分默认会展示,跟父元素一样,需要设置overflow:auto,以滚动条形式展示。
  • 相关阅读:
    雑談
    safari下无法模拟click()的解决方法 ------转载
    用户操作
    居中
    replace 重写
    JS数组添加元素的三种方式
    Asp.Net Core 包
    CSS3 动画 可以参考
    CSS3 动画
    完全居中
  • 原文地址:https://www.cnblogs.com/yinghuochongfighter/p/12912020.html
Copyright © 2011-2022 走看看