html,body{height:100%}

.wraper{
display:flex;
flex-direction:column;
height:100%;
flex-wrap: nowrap; } div{
border:1px solid red;
} .top{
height:20px;
} .mid{
border:1px solid green;
flex:1;
} .bottom{
height:20px;
}

  

  <div class="wraper">
<div class="top"></div>
<div class="mid"></div>
<div class="bottom"></div>
</div>

JS Bin on jsbin.com

flex 3 rows layout的更多相关文章

  1. Flex 容器基本概念

    申明文章出处:http://www.adobe.com/cn/devnet/flex/articles/flex-containers-tips.html Flex 4 容器可以提供一套默认的布局:B ...

  2. 【Flex】自定义组件学习

    文件列表 主文件: index.mxml 自定义组件  components.mylogo.mxml 图img  a.jpg 2 mylogo.mxml <s:Group xmlns:fx=&q ...

  3. [C1] C1FlexGrid 行列增删&单元格合并拆分

    上一篇中实现了 C1FlexGrid的撤销还原功能,这篇是要仿 Excel 做一个行列删除以及单元格的自由合并拆分,楼主怕在原工程里复杂的说不清道不明,所以干脆提取出来做了一个 Demo 来说明实现过 ...

  4. 使用Flex4容器若干技巧

    本文适用于正在寻找使用Flex 4容器和布局的快速参考指南的开发人员. 尽管这不一定是一个复杂问题,但这似乎是许多开发人员的挫折的来源,特别是对于那些Flex刚刚入门的开发人员. 当开发人员不知道如何 ...

  5. Flex4之皮肤定制

    Flex4之皮肤定制[Skin类和Skin类]          博客分类: RIA-Flex4专栏 FlexAdobeUPFlashUI 第一.关于spark.skin.SparkSkin类的 1. ...

  6. 记录一个简单的vue页面实现

    <template> <div class="userView"> <!-- 页眉颜色统一 --> <div class="bu ...

  7. 测试用例Excel模板For Quality Center

    Subject Test Name Description Step Name  Step Description Expected Result PU Regr\Component\Attribut ...

  8. 知识共享图文直播---(一)将数据库中的数据加载到MSFlexGrid空间中再导入Excel

    熟话说万物皆有其存在的道理,为什么我突然想写<知识共享图文直播>这个系列呢?首先,我想的是记录自己学习的历程,在记录中加深自己对知识的理解,同时也希望自己的博文能帮助到其他数据库的初学者. ...

  9. 首个vue.js项目收尾中……

    前言: 4.26号入手vue.js+elementUI,迄今为止我们的工作应该可以暂时告一段落了:下周开始,又是新的“征程”. 过程:站在接近完成的角度来看这个项目,似乎的确有许多事情需要自己阐述. ...

随机推荐

  1. 【读书笔记】iOS-读取文本文件

    一,文本文件的内容. 二,工程目录 三,ViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional ...

  2. JAVA基础学习day17--集合工具类-Collections

    一.Collection简述 1.1.Collection与Collections的区别 Collections是集合的静态工具类 Collection:是集合的顶级接口 二.Sort 2.1.sor ...

  3. Android 之 自动匹配字符AutoCompleteTextView

    AutoCompleteTextView是自动匹配字符,当我们输入一个单词或一段话的前几个字时,就会自动为你匹配后面的内容看效果图: 下面是代码: MainActivit: package com.e ...

  4. 敏捷开发中高质量 Java 代码开发实践

    Java 项目开发过程中,由于开发人员的经验.代码风格各不相同,以及缺乏统一的标准和管理流程,往往导致整个项目的代码质量较差,难于维护,需要较大的测试投入 和周期等问题. 这些问题在一个项目组初建.需 ...

  5. ci 使用体会

    1.在git review后,必须前一天commit先merge后,下一个commit 才能merge,不然就会出现merge pending的状态. 2.jenkins的gerrit trigger ...

  6. 《ASP.NET MVC 5 框架揭秘》

    <ASP.NET MVC 5 框架揭秘> 基本信息 作者: 蒋金楠 出版社:电子工业出版社 ISBN:9787121237812 上架时间:2014-8-1 出版日期:2014 年8月 开 ...

  7. Spring-framework下载

    下载版本,修改版本号就行. http://repo.springsource.org/libs-release-local/org/springframework/spring/4.3.2.RELEA ...

  8. 避免jQuery名字冲突--noConflict()方法

    众所周知,在jQuery语法中,$符号是jQuery的简写方式.但在某些情况下,可能需要在同一个页面引入其他javascript库(比如Prototype).因为$简短方便,很多的库也是使用$符号.为 ...

  9. Proc-fs 编程

    一.简介 Proc文件系统是Linux系统上的一种伪文件系统(也即虚拟文件系统),存储的是当前内核运行状态的一系列特殊文件,用户可以通过这些文件查看有关系统硬件及当前正在运行进程的信息,甚至可以通过更 ...

  10. makefile自动生成目标与依赖的关系

    有main.c: #include <stdio.h> #include "command.h" int main(int argc, const char *argv ...