css3弹性盒子模型——回顾。

前端之家收集整理的这篇文章主要介绍了css3弹性盒子模型——回顾。前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。


  Box-flex属性规定框的子元素是否可伸缩其尺寸。
    父元素必须要声明display:Box;子元素才可以用Box-flex。
    语法:Box-flex:value;
    示例:
      
      

Box">
        

        

        

      

    结果: 图片

    

    可以指定某个子元素的宽度,剩下的部分平分。
    示例:
      
      

Box">
        

        

        

      

      结果: 图片

      

  Box-orient
    用来确定子元素的方向,是横着还是竖着。
    可选值:horizontal | vertical | inline-axis | Box-axis | inheritinline-axis是默认的 horizonta inline-axis 是一样的让元素横着 vertical
      Box-axis 是一样的让元素纵列。
    示例:
      
      

Box">
        

        

        

      

    结果:如图

  Box-direction
    用来确定子元素的排列顺序。可选值:
      onrmal | revers | inherit onrmal是默认值按着正常顺序排列,从左到右
      从前到后,revers表示反转。
    示例:
      
      

Box">
        

        

        

      

    结果: 如图

    

  Box-align与Box-pack
    决定盒子内部剩余空间怎么使用,行为效果为对齐方式。
      Box-align 为垂直方向上的空间利用,Box-pack 为水平方向上的空间利用。
      Box-align 可选参数: start | end | center | baseline | stretch
      stretch为默认父标签的高度有多高,子元素就有多高。start表示底边对齐
      end 为底部对齐,center居中对齐,baseline 基线对齐。
    示例:
      
      

Box">
        

        

        

      

    结果:如图

    

    Box-pack可选值: start | end | center | justify
      start为默认值, justify表示两端对齐。
    示例:
      
      

Box">
        

        

        

      

    结果:如图

    

 Box-lines
    用来决定子元素是否可以换行显示,有两个可以选的值:single | mutiple
      single 默认值,不换行。mutiple 换行多行显示
    示例:
      
      

Box">
        

        

        

      

    结果:如图

      

  6.Box-ordinal-group
    改变子元素的顺序,值为数字,数字越小越排在前面。
    示例:
      
      

Box">
        

        

        

      

    结果:如图

    

      

猜你在找的CSS相关文章