• CSS篇 《图解CSS3》笔记 Flex


    Flexbox模型的三个规范:

    1. 旧版本  2009年    display: box、inline-box

    2. 混合版本 2011年    display: flexbox、inline-flexbox

    3. 新版本  2012年      display: flex、inline-flex

    当display属性为以上时,将为其后代创建FFC(Flex Formatting Context)。

    旧版本属性如下:

    1. box-orient    定义伸缩主轴的方向(与书写顺序有关:ltr、rtl)

      horizontal | vertical | inline-axis (内联轴排列)| block-axis (块轴排列)

    2. box-direction  定义伸缩项目在伸缩容器中的排列顺序

      normal | reverse

    3. box-lines    伸缩项目溢出时是否换行(主流浏览器不支持该属性

      single、multiple

    4. box-pack    主轴方向上,额外空间的分配

      start(默认:额外空间在最后)、end、center(额外空间仅处于两端)、justify(额外空间平均分布在所有缝隙之间,不包括首尾边缘)

    5. box-align    侧轴方向上,额外空间的分配

      start、end、center、baseline、stretch(拉伸填充侧轴)

    6. box-flex    主轴方向上,额外空间如何在每个伸缩项目上分配;按比例均分额外空间(使用在伸缩项目上)

      <number>

    7. box-ordinal-group  伸缩项目在伸缩流中显示的顺序,(使用在伸缩项目上)

      <number>  默认为1,值越大,位置越靠后;

    混合版本属性如下(主要针对IE10,加前缀:-ms-):

    1. flex-direction  伸缩项目在主轴的排列顺序

      row、row-reverse、column、column-reverse

    2. fllex-wrap    伸缩项目超出时的处理方式

      nowrap(单行显示)、wrap(多行)、wrap-reverse(多行但反向排列)

    3. flex-flow    顺序与是否换行的组合

      flex-direction, flex-wrap

    4. flex-pack    伸缩项目在主轴上对齐方式

      start、end、center、justify、distribute(伸缩项目的两端也会保留空间)

    5. flex-align   伸缩项目在侧轴上对齐方式

      start、end、center、baseline、stretch

    6. flex-line-pack 当伸缩项目较多,多行展现时;主轴上的每一行|列成为伸缩项目行,多列中的这些行在侧轴上的排列顺序

      start(在侧轴上向左靠拢)、end、center、justify、distribute、stretch

    7. flex      (用于伸缩项目)类似于box-flex,伸缩项目的宽度、高度是否基于可用空间具有弹性

      正弹性整数、负弹性整数、首选大小 | none;

    8. flex-order   (用于伸缩项目)伸缩项目在主轴的排列顺序

      正整数,默认为0

    新版本属性如下:

    1. flex-direction

    2. flex-wrap

    3. flex-flow

    4. justify-content  主轴对齐

      flex-start、flex-end、center、space-between、space-around;

    5. align-items、align-self  伸缩项目行在侧轴的对齐方式、伸缩项目自身在所在行的对齐方式

      flex-start、flex-end、center、baseline、stretch

    6. align-content  与align-items相似,不过只有在:伸缩项目存在于多行时才有效,即:flex-wrap为wrap;

    7. flex       (使用于伸缩项目)伸缩性

      扩展比率、收缩比率、伸缩基准值

    8. order      (使用于伸缩项目)排列顺序

      number

  • 相关阅读:
    @controller和@restController注解详解
    customer.sql
    jsp自定义标签
    git常用命令
    dubbo问题
    idea maven项目的移除添加
    bean type not found
    利率配置修改时选中下拉框时,加alert选中,否则不选中
    Vmware文件类型
    抖音平台分析
  • 原文地址:https://www.cnblogs.com/diydyq/p/4234630.html
Copyright © 2020-2023  润新知