转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml

display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用,

display:flex 这个牛逼的css3布局属性,遗憾的是只有谷歌和火狐支持,
中国人常用的手机上的浏览器几乎全军覆没,UC浏览器不支持,安卓4.1.1和之前版本手机自带的浏览器也不支持,微信自带浏览器也不支持。

看来要留给儿子们用了。

示例:

html,body{ padding:0; margin:0;}
/*
flex-flow: row wrap; row横向(左向右)显示 column竖向(上向下)显示 wrap一行显示不完的时候换行
*/
.col{ border:red solid 1px;}
footer { height:300px; display: -webkit-flex;
-webkit-flex-flow: row;
-webkit-align-items: stretch;
-webkit-justify-content:space-between; /*IE10还不支持*/
display: -ms-flex;
-ms-flex-flow: row wrap;
-ms-align-items: stretch;
-ms-justify-content:space-between; display: flex;
flex-flow: row;
align-items: stretch;
justify-content:space-between;
}
.col2{-webkit-flex:1;-moz-flex:1;flex:1}
display:flex 的HTML测试结构<footer>
    <div class="col col1" style=" width:60px;">jquery特效</div>
    <div class="col col2" style="">前端路上</div>
    <div class="col col3" style="width:30px;">懒人建站</div>
</footer> 

一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。

  伸缩容器(flex  containers)是一个HTML标签元素,并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex  items)。
  这有一个三列布局的例子。外面的div容器是一个伸缩容器,而里面的left、main和right三个div都是伸缩项目:

  设置一个简单的伸缩容器很容易,代码如下:

.container {  display: flex;}          伸缩方向与换行(flex-flow)
  伸缩容器有一个CSS属性“flex-flow”用来决定伸缩项目的布局方式。如果伸缩容器设置了“flex-flow”值为“row”,伸缩项目排列由左向右排列:

  如果“flex-flow”值设置为“column”,伸缩项目排列由上至下排列:

  这里将展处样设置伸缩容器,使用伸缩项目在一行中显示:

.container {  display: flex;  flex-flow: row;}          一个伸缩容器中的所有伸缩项目既可以排列在单行也可以多行排列。这个主要由“flex-flow”是否设置为“wrap”来决定。如果伸缩容器设置了“wrap”属性值,当伸缩项目在伸缩容器中无法在一行中显示的时候会另起一行排列。

  这里展示了如何将伸缩容器设置为“wrap”:

.container {  display: flex;  flex-flow: row wrap;}  伸缩项目(flex items)
  在伸缩容器中的所有子元素都将自动变成伸缩项目。没有额外配置CSS的必要。你唯一需要的做的就是设置伸缩项目的尺寸。
  如果伸缩容器把“flex-flow”设置为“row”后,伸缩项目将需要设置他们的宽度。伸缩项目的高度将会自动设置为伸缩容器的高度:

 如果伸缩容器把“flex-flow”设置为“column”后,伸缩项目将需要设置他们的高度,伸缩项目的宽度将会自动设置为伸缩容器的宽度:

 给伸缩项目设置“width”和“height”属性来定义伸缩项目尺寸,而这个伸缩项目是独立于其他伸缩项目。例如,如果我们给主内容(content)设置了一个600px的宽度,不管伸缩容器中有一个、两个或者上百个伸缩项目,主内容的宽度都是600px。

  如果你想伸缩项目根据伸缩容器剩余的空间来决定伸缩项目的宽度,你可以使用“flex”属性。例如,我们可以告诉浏览器,左边栏和右边栏占用了伸缩容器减去主内容宽度的空间。
  flex的值于对应的空间成正比。如果左边栏设置了值为“1”和右边栏设置了值为“2”,伸缩容器剩余的空间将按比例分配给左边栏和右边栏,并且右边栏所占的空间是左边栏的两倍:

  下面是示例中运用在伸缩项目上的一些代码,展示了独立宽度和按比例计算的宽度:

.main {  width: 600px;}.left {  flex: 1;}.right {  flex: 2;}  完整的实例
  这是一个很简单的实例,Flexbox创建了一个经典的三列布局。主内容宽度为60%,而边栏是使用“flex”属性,按比例自动根据伸缩容器剩余空间计算得到对应的宽度:
  HTML结构
  …       …     …
          CSS代码
.container {  display: flex;  flex-flow: row;}.main {  width: 60%;}.left {  flex: 1;}.right {  flex: 2;}  示例效果

 

display:flex 多栏多列布局的更多相关文章

  1. display:flex;多行多列布局学习

    从以前的table布局到现在的div布局,再到未来的flex布局,CSS重构方面对展示行和适应性的要求越来越高: 首先来比较一下布局方式的更新意义: table布局: 优点:1.兼容性好,ie6.ie ...

  2. 多栏多列布局(display:flex)

    display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...

  3. 两列布局(浮动、定位、flex)和三列布局(圣杯、双飞翼、flex)

    demo 各种布局演示 https://jsfiddle.net/mayufo/qp890peq/1/ 两栏布局 浮动 <div class="box1"> <d ...

  4. flex几种多列布局

    基本的等分三列布局 .container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; background: red; ...

  5. 土旦:关于display:flex碰上white-space nowrap 影响布局的问题

    背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影 ...

  6. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  7. css3 弹性布局和多列布局

    弹性盒子基础 弹性盒子(Flexible Box)是css3中盒子模型的弹性布局,在传统的布局方式上增加了很多灵活性. 定义一个弹性盒子 在父盒子上定义display属性: #box{ display ...

  8. display flex在部分低级android中的支付宝窗口表现

    display flex用在移动端布局 当该元素是inline元素如span的时候回出现无宽高的情况,需要增加display:block: 他的子元素如果是inline元素那么也同样会出现这个问题,需 ...

  9. 使用display:flex;实现两栏布局和三栏布局

    一.使用display:flex;实现两栏布局 body,div{margin:0px;padding:0px;} .flex-container{display:flex;height:300px; ...

随机推荐

  1. ActionResult,PartialViewResult,EmptyResult,ContentResult

    HttpGet  HttpPost  HttpDelete  HttpPut  HeepHead HttpOptions HttpPatch属性都是动作方法选定器的一份子,比如若在action上套用H ...

  2. 使用 Vagrant 打造跨平台开发环境

    Vagrant 是一款用来构建虚拟开发环境的工具,非常适合 php/python/ruby/java 这类语言开发 web 应用,“代码在我机子上运行没有问题”这种说辞将成为历史. 我们可以通过 Va ...

  3. 以大写字母“J”来展示位图

    '0' => '00011100001111111001100011011000001111000001111000001111000001111000001111000001111000001 ...

  4. backbone-todo案例分析

    todo案例可以到这个地址下载 https://github.com/jashkenas/backbone 添加数据后 todo案例不涉及Router,仅有Model.Collection.View的 ...

  5. Java 遍历Map时 删除元素

    Java代码   package,,,,,,,,,,,==){ System.out.println("delete this: "+key+" = "+key ...

  6. Sql Server建立链接服务器访问Access的MDB数据库

    EXEC master.dbo.sp_addlinkedserver @server = N'test', @srvproduct=N'OLE DB Provider for Jet', @provi ...

  7. extjs MVC模式的个人看法

    针对一个后台管理页面是mvc模式,后台也是mvc模式下的项目,要怎么去熟悉呢? 首先以我个人的认解,先从后台的管理界面来看,会有control,model,store,view:其中先看view的代码 ...

  8. JavaScript POST 请求如何跨域

    前天遇到一个问题,就是我上传图片的时候,这个图片需要上传给某个API的接口 这样问题就来了,我们之前上传图片的时候都是先上传到我们自己的后台里面,然后通过后台,再把这个流传到图片服务器上. 但是上传到 ...

  9. nginx https

    默认情况下ssl模块并未被安装,如果要使用该模块则需要在编译时指定–with-http_ssl_module参数,安装模块依赖于OpenSSL库和一些引用文件,通常这些文件并不在同一个软件包中.通常这 ...

  10. 【Android开发学习笔记】【第七课】五大布局-上

    概念 Android程序各式各样,依靠的就是布局,先来看看布局都是怎么来的: 白色部分就是我们经常用的几种布局,主要说说介绍下面五大布局 FrameLayout AbsoluteLayout Line ...