zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    模拟器 | 如何安装ENSP,附上最详细的步骤,含安装软件!
    《平凡的世界》孙少平给妹妹孙兰香的信
    Date类添加一个新的方法,用prototype
    jquery动画相关函数
    斐波那契数列 递归调用
    怎样才能升天?
    jquery tabs切换插件
    vmware桥接共享的问题
    C#,mysql 添加数据的问题
    一根神奇的网线
  • 原文地址:https://www.cnblogs.com/zhouhongdan/p/10948640.html
Copyright © 2011-2022 走看看