zoukankan      html  css  js  c++  java
  • 弹性盒布局2(写在子元素上的属性)

    以下属性是写在子元素身上的: 

     一、flex-grow(自动分配填满父元素剩余的空间,按比率分配剩余空间,默认值为0,不进行分配,不允许负值)

     

     

     

     

    计算方式:300-(80+160)=60

    box1最终的宽度:60*(1/2)+80=110

    box2最终的宽度:60*(1/2)+160=190

    二、flex-shrink(自动缩减超出父元素的空间;默认值为1,自动将超出父元素的部分进行缩减;)

     

     flex-grow和flex-shrink的计算对比

    三、flex-basis(定义子元素的宽度,可用长度length和百分比来定义宽度,不允许负值;默认值为auto,取决于原来的宽度)

     

     

     按1:1:6:1:1的情况按照flex-shrink的计算规则进行计算

    四、复合属性

     

     

     

    五、order

     

     

    六、align-self(用于设置弹性子元素单独自身在侧轴方向上的对齐方式)

     

     

     h没加任何属性和auto(a),stretch(g)都一样

    e和f按照文字基线baseline来对齐

  • 相关阅读:
    Java EE 和 Java Web
    09-盒模型
    08-层叠性权重相同处理
    07-css的继承性和层叠性
    06-伪元素选择器
    05-伪类选择器
    04-属性选择器
    03-高级选择器
    02-css的选择器
    01-css的引入方式
  • 原文地址:https://www.cnblogs.com/zqlym/p/13610283.html
Copyright © 2011-2022 走看看