zoukankan      html  css  js  c++  java
  • flex宽度总结

    flex宽度相关的属性有三个 flex-grow,flex-shrink,flex-basis。下面分别介绍其相关特点:

    flex-grow 扩大因子,主轴有剩余空间时,元素分配到剩余空间的比率

    flex-shrink 收缩因子,主轴剩余空间为负时,元素分配到剩余空间的比率

    flex-basis:设置元素初始大小,若未设置,则水平排列默认为元素的宽度,垂直排列默认为元素的高度

    当flex-basis为0时,例如(flex:1),此时item的宽度不受width的影响

    当flex-basis为auto时,item的宽度随着width的变化增大或缩小

    flex是flex-grow,flex-shrink,flex-basis的简写,简称GSB

    flex的写法与三个属性的对照表

    flex: none => flex: 0 0 auto;
    flex: auto => flex: 1 1 auto;
    flex: 0 => flex: 0 1 0%;
    flex: 1 => flex: 1 1 0%;
    flex: 0 auto => flex: 0 1 auto;(默认值)
    flex: 0 1 => flex: 0 1 0%;

  • 相关阅读:
    Codeforces 977F
    Codeforces 219C
    Codeforces 1132
    Codeforces 660C
    Codeforces 603A
    Codeforces 777C
    Codeforces 677
    JNUOJ 1032
    Codeforces 677D
    Codeforces 835C
  • 原文地址:https://www.cnblogs.com/mengff/p/6919934.html
Copyright © 2011-2022 走看看