CSS3弹性盒模型布局模块

时间:2022-09-17 13:22:47

原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/

一个简单的例子

当我们想要显示一个三栏布局,我们会这样做:

<div class="flex-container">
    <div class="col-1">I am column 1</div>
    <div class="col-2">I am column 2</div>
    <div class="col-3">I am column 3</div>
</div>

.flex-container {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
}

我们使用display属性把容器元素设为 box,然后我们用box-orient属性,将它设置水平(你也可以使用vertical设为垂直)。

用这个方法,直接子元素(如<div class=”col-1″>等)将被一个接一个水平放置,它们的宽度由它们的内容决定。但是如果我们想用自适应的方法让它们扩展到整个容器元素的宽度该怎么办呢?那么我们就需要为它们设置box-flex:

.col-1 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}
.col-2 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}
.col-3 {
    -moz-box-flex: 2;
    -webkit-box-flex: 2;
    box-flex: 2;

}

box-flex属性的值是指父容器中除了子容器以外的剩余空间如何被子容器分割,就像佐伊评论的,数字越大分到的越多。这也意味着每个元素的padding不会额外增加它的宽度(不错吧?)。

CSS3弹性盒模型布局模块的更多相关文章

  1. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  2. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  3. CSS3弹性盒模型,Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

  4. css3基础教程:CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  5. css3弹性盒模型flex快速入门与上手&lpar;align-content与align-items&rpar;

    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...

  6. 彻底搞懂flex弹性盒模型布局

    为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...

  7. css和css3弹性盒模型实现元素宽度(高度)自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. 87&period;CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  9. CSS3弹性盒模型flexbox布局

    属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 定义一个flex容器,内联或者根据指定的值,来作用于下面的子类容器.· box:将对象作为弹性伸缩盒显示. ...

随机推荐

  1. 【C&num;】获取网页内容及HTML解析器HtmlAgilityPack的使用

    最近经常需要下载一些东西,而这个下载地址又会经过层层跳转,每个页面上都有很多广告,烦不胜烦,所以做了一个一键获得最终下载地址的小工具.使用C#,来获取网页内容,然后通过HtmlAgilityPack获 ...

  2. UVALive3902 Network&lbrack;贪心 DFS&amp&semi;&amp&semi;BFS&rsqb;

    UVALive - 3902 Network Consider a tree network with n nodes where the internal nodes correspond to s ...

  3. window&period;showModalDialog的传值和返回值

    window.showModalDialog(URL,dialogArgments,features) 打开一个新窗口 URL为要将打开的网页地址. dialogArgments为设定好传递给新视窗网 ...

  4. 关于MyBatis的工作流程

    1.从一个jdbc程序开始 public static void main(String[] args) { Connection connection = null; PreparedStateme ...

  5. 我们为什么要遵循W3C标准规范

    大部分的站长和拥有网站的企业负责人都会知道,每当有浏览器发布大更新的时候,我们刚建立不久的网站就会发生无法预知的严重错误,我们只能重新建立或改版网站,使其可以应归新发布的浏览器.好比1996-1999 ...

  6. smarty如何处理状态值的显示

    比如状态,有效或者无效.这个数据库中保存的是1或者2这样的字段. 显示在列表的时候不能是1或者2吧. 以前,我都是在后台foreach,处理的.感觉处理之后,前台就不灵活了.这个值就被替换成了文字. ...

  7. Failed to execute goal org&period;apache&period;maven&period;plugins&colon;maven-compiler-plugin&colon;3&period;1&colon;co

    在pom中加入下面代码: <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId&g ...

  8. 20165323 实验二 Java面向对象程序设计

    一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:杨金川 学号:20165323 指导教师:娄嘉鹏 实验日期:2018年4月16日 实验时间:13:45 - 15:25 实验序号:二 ...

  9. 用lua编写wireshark插件分析自己定义的协议

    参见: https://yoursunny.com/study/IS409/ScoreBoard.htm https://wiki.wireshark.org/LuaAPI/TreeItem http ...

  10. 【译】第44节---EF6-存储过程映射

    原文:http://www.entityframeworktutorial.net/entityframework6/code-first-insert-update-delete-stored-pr ...