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%;

  • 相关阅读:
    简易表格练习
    CSS圆角样式
    力不从心
    学渣在努力~
    嫌疑人
    poj1308 Is it a tree?
    悲剧文本
    迷宫问题
    n皇后问题
    油田
  • 原文地址:https://www.cnblogs.com/mengff/p/6919934.html
Copyright © 2011-2022 走看看