zoukankan      html  css  js  c++  java
  • 第 29 章 CSS3 弹性伸缩布局[中]

    学习要点:

    1.混合过度版

    主讲教师:李炎恢

    本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解。

    一.混合过渡版

    混合版本的 Flexbox 模型是 2011 年提出的工作草案,主要是针对 IE10 浏览器实现的伸缩布局效果,其功能和旧版本的属性大同小异。我们还是采用上一节课的文件,然后使用混合过渡代码,实现 IE10 的伸缩布局。

    首先,设置伸缩盒的 display 有如下两个属性值:

    属性值

    说明

    flexbox

    将容器盒模型作为块级弹性伸缩盒显示(混合版本)

    inline-flexbox

    将容器盒模型作为内联级弹性伸缩盒显示(混合版本)

    //需要 IE 前缀-ms-

    div {
        display: -ms-flexbox;
    }

    1.flex-direction

    flex-direction 属性和旧版本 box-orient 属性一样,都是设置伸缩项目的排列方式。

    //设置从上往下排列 

    div {
        -ms-flex-direction: column;
    }

    属性值

    说明

    row

    设置从左到右排列

    row-reverse

    设置从右到左排列

    column

    设置从上到下排列

    column-reverse

    设置从下到上排列

    2.flex-wrap

    flex-wrap 属性类似与旧版本中的 box-lines,但是 box-lines 我们没有讲解,原因是没有浏览器支持它。

    //设置无法容纳时,自动换行

    div {
        -ms-flex-wrap: wrap;
    }

    属性值

    说明

    nowrap

    默认值,都在一行或一列显示

    wrap

    伸缩项目无法容纳时,自动换行

    wrap-reverse

    伸缩项目无法容纳时,自动换行,方向和 wrap 相反

    3.flex-flow

    flex-flow 属性是集合了排列方向和控制换行的简写形式。

    //简写形式

    div {
        -ms-flex-flow: row wrap;
    }

    4.flex-pack

    flex-pack 属性和旧版本中的 box-pack 一样,设置伸缩项目的对其方式。

    //按照中心点对齐 

    div {
        -ms-flex-pack: center;
    }

    属性值

    说明

    start

    伸缩项目以起始点靠齐

    end

    伸缩项目以结束点靠齐

    center

    伸缩项目以中心点靠齐

    justify

    伸缩项目平局分布

     5.flex-align

    flex-align 属性和旧版本中的 box-align 一样,处理伸缩项目容器的额外空间。

    //处理额外空间 

    div {
        -ms-flex-align: center;
    }

    属性值

    说明

    start

    伸缩项目以顶部为基准,清理下部额外空间

    end

    伸缩项目以底部为基准,清理上部额外空间

    center

    伸缩项目以中部为基准,平均清理上下部额外空间

    baseline

    伸缩项目以基线为基准,清理额外的空间

    stretch

    伸缩项目填充整个容器,默认

    6.flex

    flex 属性和旧版本中的 box-flex 类似,用来控制伸缩容器的比例分配。

    //设置比例分配

    p:nth-child(1) {
        -ms-flex: 1;
    }
    
    p:nth-child(2) {
        -ms-flex: 3;
    }
    
    p:nth-child(3) {
        -ms-flex: 1;
    }

    7.flex-order

    flex-order 属性和 box-ordinal-group 属性一样控制伸缩项目出现的顺序。

    //设置伸缩项目顺序

    p:nth-child(1) {
        -ms-flex-order: 2;
    }
    
    p:nth-child(2) {
        -ms-flex-order: 3;
    }
    
    p:nth-child(3) {
        -ms-flex-order: 1;
    }
  • 相关阅读:
    微服务架构技术栈选型手册(万字长文)
    Visual Studio 2013 always switches source control plugin to Git and disconnect TFS
    Visual Studio 2013 always switches source control plugin to Git and disconnect TFS
    MFC对话框中使用CHtmlEditCtrl
    ATL开发 ActiveX控件的 inf文件模板
    ActiveX: 如何用.inf和.ocx文件生成cab文件
    Xslt 1.0中使用Array
    如何分隔两个base64字符串?
    An attempt was made to load a program with an incorrect format
    JQuery 公网 CDN
  • 原文地址:https://www.cnblogs.com/zfc2201/p/5450647.html
Copyright © 2011-2022 走看看