• 关于flex的布局理解


    flex布局是一种新的布局方式也就是弹性盒子;在布局上更加方便,但是要注意的是在flex布局中float、position是无效的。

    图片来自阮一峰的博客 。下面我们进入正题:

    flex布局分为分为主轴justify-content和纵轴align-items/content

    justify-content: 

      1属性:定义为主轴上的内容

      2具体分为:flex-start;flex-end;space-between;space-around;center;

    align-items/content:

      1属性:定义为纵轴上的内容

      2具体分为:flex-start;flex-end;space-between;space-around;center;

      3items定义为只有一条纵轴线;content定义为多条纵轴线;

    flex-direction(方向):

      1属性:定义主轴方向;

      2具体分为以下四种:row定位主轴方向为横向默认状态;row-reverse定位主轴方向横向反转;

                column定位主轴方向为纵向默认状态由上至下;column定位主轴方向为横向反转状态;

    flex-wrap:定义子元素是否换行:

      1.nowrap定义元素不会换行;

      2wrap定义元素会换行;

      3wrap-reverse定义元素换行反转;

    flex-flow是元素flex-direction和flex-wrap和简写属性,默认为row nowrap。

    flex-shrink:属性为缩小  根据大小从整体上按照所写比例缩小

    flex-grow:属性为增大 根据整体来从整体剩余部分按比例成长

    order给flex元素排序 如order:number/integer(整体)

    flex-basis:定义为在浏览器分配空间之前,所占得空间大小,可以用width和height来定义 ,默认为auto即项目本来的大小;

    align-self:定义子元素内容自己的位置,允许子项目与其他项目对齐方式不一样。可以覆盖align-items的属性,默认属性为auto表示继承

         父元素的属性,如果没有父元素就等同于stretch(拉伸);

        具体属性有 flex-start;flex-end;auto;baseline;stretch;center;

    flex属性是flex-grow、flex-shrink和flex-basis的简写 默认为0 1 auto;

    他有2个快捷键auto(1 1 auto)和none(0 0 auto)。

     

  • 相关阅读:
    nginx+php-fpm 配置和错误总结
    C#——Winform 无边框随意拖动【转载】
    C#——Socket
    asp.net——Base64加密解密
    asp.net——上传图片生成缩略图
    C#——获取远程xml文件
    SQL Server—— 如何创建定时作业
    asp.net——正则表达式
    asp.net——Josn转DataTable(转)
    JS——EasyuiCombobox三级联动
  • 原文地址:https://www.cnblogs.com/l8l8/p/8047760.html
Copyright © 2020-2023  润新知