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

  • 相关阅读:
    Xen虚拟机的创建和启动
    Linux Shell编程基础
    虚拟化的概念
    Android XML解析
    Android数据存储之文件存储
    Android GPRS开关软件(APN开关)
    数据中心
    debian下dos2unix的安装
    linux Shell重定向
    GPRS开关软件一些问题的解决方法
  • 原文地址:https://www.cnblogs.com/zhouhongdan/p/10948640.html
Copyright © 2011-2022 走看看