美文网首页
WEB-02-flex容器

WEB-02-flex容器

作者: 就爱吃肉_165d | 来源:发表于2017-07-11 17:11 被阅读0次

    容器:

    1、flex-wrap:wrap | nowrap | wrap-reverse

           //是否换行flex-wrap:
    

    2、flex-direction:row|row-reverse|column|column-reverse

           //决定主轴的方向flex-direction
    

    3、flex-flow:(上两个的缩写 值与值之间用空格分隔)

    4、align-items:flex-start | center | flex-end | space-between | space-around | stretch

           //沿交叉轴对齐
    
          1.flex-start:沿交叉轴上方对齐
    
          2.center:沿交叉轴中心对齐
    
          3.-flex-end:沿交叉轴下方对齐
    
          4.baseline:沿文字基准线对齐
    
          5.stretch:默认值     填满整个交叉轴空间
    

    5、align-content:flex-start | flex-end | center | space-around | space-between | stretch

          // (决定多根轴线沿交叉轴的对齐方向          **!注!只有换行            产生多根轴线时有效**
    

    6、justify-content:flex-start | flex-end | center | space-around | space-between

           //决定项目在主轴上的对齐方式

    相关文章

      网友评论

          本文标题:WEB-02-flex容器

          本文链接:https://www.haomeiwen.com/subject/voymhxtx.html