美文网首页
flex布局详解-弹性布局看我就对了

flex布局详解-弹性布局看我就对了

作者: 繁华退却 | 来源:发表于2019-05-05 10:48 被阅读0次

    1. 新老盒子模型区别 box-sizing
    2. calc语法和用处
    3. flex的使用
    4. jusitify-content用法
    5. align-items的用法
    6. align-content的用法
    7. align-items和align-contend的区别
    8. flex-flow讲解
    9. align-self的作用
      10.flex-grow
      11.oder注意事项

    盒子box-sizing

    我们在css中经常会用到paddingborder,那这时候问题就会出现了,例如有一个div,宽高我们都设置为100px,我们通过offsetWidth属性打印div宽度,此时为100px,如果你添加一个10px的border,在通过offsetWidth打印div宽度,此时应该为120px;这就是老盒子模型。那么我们来看对比一下盒子模型;

    box-sizing:
          content-box
          border-box
    

    根据名字我们或许也能猜出,content(内容),content-box也就是说无论是padding还是border不会占content的位置,所以使用了paddingborder会向外扩张,盒子变大、宽度就会增加!border-boxpaddingborder会向内扩张,盒子不变、宽度不变。

    calc公式

    刚学习css的时候,心里总有疑问有没有这样的语法(当然这样写是丝毫没有作用的❌)

        width: 100% - 100px;
    

    但是,我要告诉大家,CSS还真的提供了这样一个函数,那就是calc公式

        width: calc(100% - 100px);
    
    • 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px)
    • 任何长度值都可以使用calc()函数进行计算;
    • calc()函数支持 "+", "-", "*", "/" 运算;
    • calc()函数使用标准的数学运算优先级规则;

    display:flex

    display:flex添加在父级
    适配浏览器:-webkit- (真是工作中,使用postCss插件,会自动适配浏览器)
    如果使用了flex弹性布局,那么就不需要使用float浮动,如果想使用position定位,最好也是在外面套一层来使用。

    父级身上其他元素

    justify-content 子元素水平排列方式 演示
    • center:居中
    • flex-start: 居左
    • flex-end: 居右
    • space-between: 两端对齐
    • space-around: 子元素拉手分布
    align-items 子元素垂直排列
    • center 居中
    • flex-end 底部
    • flex-start 开始
    align-centent 多行的时候,垂直排列
    • center 居中
    flex-direction: 排列方式
    • row 横向排列
    • row-reverse 横向反向排列
    • column 纵向排列
    • column-reverse 纵向反向排列
    flex-wrap 子元素是否在一行显示
    • nowrap 不换行
    • wrap 换行
    flex-flow:等价于 flex-direction + flex-wrap
    • flex-flow: row wrap

    子级身上属性:

    flex:1(1指的是一个系数)
    align-self (其实就是子元素用来覆盖父级align-items)
    flex-group:1 (定义子元素放大比例,默认0)
    order(规定子元素顺序、排序 数值越小越靠前默认值0)

    相关文章

      网友评论

          本文标题:flex布局详解-弹性布局看我就对了

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