• display:flex 简单记录


    1.有写了 display:flex;这个就是 采用了 flex布局的 元素  

        这个元素可以 写 6个属性:

        flex-direction : 

         row |  column  | row-reverse | column-reverse

        flex-wrap : 

                   wrap | nowrap | wrap-reverse

        flex-flow :   

                   row wrap |  row nowrap

      justify-content:

        flex-strat (左对齐)  

                  flex-end(右对齐)

          center(水平居中)

                  space-between (两端对齐 子集之间的间隔相等)

                  space-around: (每个子集 两侧间距 相等)

      align-items:

                     flex-start( 顶对齐)   

                     flex-end(底对齐) 

                     center(垂直居中) 

                     stretch (要是子 不设置高 或者 auto  就沾满整个父 的高度)

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

      

    2. 整个被 flex的 子集 有一下 属性

      order       :  数值越小,排列越靠前,默认为0。

           flex-grow :  项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

          flex-shrink : 项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

      flex-basis : 在分配多余空间之前,项目占据的主轴空间   默认值为auto,即项目的本来大小。

     

      flex :  flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

          该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

          建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

     

      参考:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

  • 相关阅读:
    第10组 Beta冲刺 (3/5)
    第10组 Beta冲刺 (2/5)
    第10组 Beta冲刺 (1/5)
    第10组 Alpha冲刺 (3/6)
    第10组 Alpha冲刺 (2/6)
    第10组 Alpha冲刺 (1/6)
    第一次作业
    第二次作业
    机器学习_第一次个人作业
    软工实践个人总结
  • 原文地址:https://www.cnblogs.com/zhouhongdan/p/10948640.html
Copyright © 2020-2023  润新知