• 弹性布局属性


    1、display flex | inline-flex;(适用于父类元素上)

    (1) flex:将对象作为弹性伸缩盒显示。

    (2) inline-flex:将对象作为内联块级弹性伸缩盒显示。

    2、flex-flow (适用于父容器上)复合属性。

    (1) flex-direction(适用于父容器的元素上):设置或检索伸缩盒对象的子元素在父容器中的位置。

    ① row:横向从左到右排列(左对齐),默认的排序方式。

    ② row-reverse:反转横向排列(右对齐)

    ③ column:纵向排列。

    ④ column:反转纵向排列,从后往前排,最后一项在最上面。

    (2) flex-warp (适用于父容器上) 设置或检索伸缩盒对象的子元素超出父容器时是否换行。

    ① nowrap:当子元素溢出父容器时不换行。

    ② wrap:当子元素溢出父容器时自动换行。

    ③ wrap-reverse:当子容器溢出父容器时自动换行,方向同wrap反转排序。

    3、justify-content (适用于父容器上) 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

    (1) flex-start:弹性盒子元素将向起始位置对齐。

    (2) flex-end:弹性盒子元素将向结束位置对齐。

    (3) center:弹性盒子元素将向中间位置对齐。

    (4) space-between:弹性盒子元素会平均地分部在行里。

    (5) space-around:弹性盒子元素会平均地分部在行里,两端保留子元素与子元素之间间距大小的一般。

    4、align-items (适用于父容器上)设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

    (1) flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

    (2) flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。

    (3) center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。

    (4) baseline:如弹性盒子的行内轴与侧轴为同一条,则该值与‘flex-start’等效。其他情况下该值将与基线对齐。

    5、align-self (适用于弹性盒模型子元素)设置或检索弹性盒子元素自身在侧轴(纵轴)方向上的对齐方式。

    6、align-content (适用于父容器上) 设置或检索弹性盒堆叠伸缩行的对齐方式。

    7、order (适用于弹性盒模型容器子元素)用整数来定义排序顺序,数值小的排在前面。可以为负值。

    8、flex (适用于弹性盒模型子元素)复合属性。设置或检索伸缩盒对象的子元素如何分配空间。

    1)none:none关键字的计算值为:0 0 auto

    2)flex-grow flex-shrink flex-basis

    3)flex-grow根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

    4)flex-shrink 设置或检索弹性盒子的伸缩比率。

    5)flex-basis

    1》auto:无特定宽度值,取决于其他属性。

    2》用长度或百分比来定义宽度。不允许负值。

  • 相关阅读:
    InnoDB 事务
    InnoDB 索引
    MySQL 8 事务管理、数据库维护、改善性能
    MySQL 7 存储过程、游标、触发器
    MySQL 6 插入数据(INSERT INTOVALUESSELECT FROM)、更新和删除数据(UPDATE SET WHEREDELETE)、创建和操纵表、视图
    MySQL 5 联结表、创建高级联结、组合查询、全文本搜索
    MySQL 4 数据处理函数、汇总数据、分组数据、子查询
    MySQL 3 通配符、正则、计算字段
    MySQL 2 SQL数据使用(检索、排序、过滤:SELECT/FROM/LIMIT/ORDER BY/DESC/WHERE/AND/OR/IN/NOT)
    JavaScript相关-深入理解函数2
  • 原文地址:https://www.cnblogs.com/wzjie1234/p/10721346.html
Copyright © 2020-2023  润新知