如图：

代码如下：

 <!DOCTYPE HTML>

 <html>

 <meta charset="utf-8">

 <head>

     <link href="flex.css" rel="stylesheet" type="text/css">

 </head>

 <body>

 <h1></h1>

 <div class="container">

     <div class="row1">

         <div class="left" >

             <div class="left-top"> <p>LEFT-TOP</p></div>

             <div class="left-bottom"> <p>LEFT-BOTTOM</p></div>

         </div>

         <div class="right">RIGHT</div>

     </div>

     <div class="row2">

         <p>BOTTOM</p>

         <p>BOTTOM</p>

         <p>BOTTOM</p>

         <p>BOTTOM</p>

         <p>BOTTOM</p>

         <p>BOTTOM</p>

         <p>BOTTOM</p>

         <p>BOTTOM</p>

     </div>

 </div>

 </body>

 </html>

CSS文件：

 .container{

     display: flex;

     display: -webkit-flex;

     flex-direction: column;

     overflow: hidden;

 }

 .row1{

     display: flex;

     display: -webkit-flex;

     flex-direction: row;

 }

 .left{

     display: flex;

     display: -webkit-flex;

     flex-direction: column;

     flex:;

     height: 655px;

 }

 .left-top{

     height: 295px;

     flex:;

     background:yellow;

 }

 .left-bottom{

     margin-top: 10px;

     flex:;

     background: rebeccapurple;

 }

 .right{

     flex:;

     background:burlywood;

 }

 .row2{

     min-height: 300px;

     overflow: auto;

     height: 400px;

     background: red;

 }

 body{

     overflow: hidden;

 }

Flex 布局实例的更多相关文章

  1. flex布局实例demo全解

    上篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇> ...

  2. [css flex布局]实例一,本来还想挺简单的,弄了挺久呢,先写一部分

    全是代码,直接拷走吧,看是不怎么好看的 参考:http://www.ruanyifeng.com/blog/search.html?cx=016304377626642577906%3Ab_e9ska ...

  3. flex布局语法+实例

    一.什么是flex布局 flex 是 flexible box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 flex 布局.你可以将前端页 ...

  4. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  5. CSS实例详解：Flex布局

    本文由云+社区发表 本文将通过三个简单的实例,实际应用上篇文章的基础理论知识,展示下Flex布局是如何解决CSS布局问题. 一．垂直居中 这里同时用非flex布局和flex布局两种方式来实现,可以对比 ...

  6. Flex 布局教程:实例

    分类: 开发者手册 Flex 布局教程:实例篇   作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Fle ...

  7. Flex 布局教程：语法和实例

    语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便, ...

  8. Flex 布局教程：实例篇【转】

    Flex 布局教程:实例篇   作者: 阮一峰 日期: 2015年7月14日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html ...

  9. flex布局各种情况总结分析及实例演示

    2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. 通过笔者大量实践,发现 ...

随机推荐

  1. ng-transclude

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 一张图讲解对象锁和关键字synchronized修饰方法

    每个对象在出生的时候就有一把钥匙(监视器),那么被synchronized 修饰的方法相当于给方法加了一个锁,这个方法就可以进行同步,在多线程的时候,不会出现线程安全问题. 下面通过一张图片进行讲解: ...

  3. 【Kafka】操作命令

    生产者 ./kafka-console-producer.sh --broker-list --topic norm 消费者 ./kafka-console-consumer.sh --zookeep ...

  4. Elevator poj3539

    Elevator Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 1072   Accepted: 287 Case Time ...

  5. bzoj3209 花神的数论题 (二进制数位dp)

    二进制数位dp,就是把原本的数字转化成二进制而以,原来是10进制,现在是二进制来做,没有想像的那么难 不知到自己怎么相出来的...感觉,如果没有一个明确的思路,就算做出来了,也并不能锻炼自己的能力,因 ...

  6. 支持向量机SVM（一）

    [转载请注明出处]http://www.cnblogs.com/jerrylead 1 简介 支持向量机基本上是最好的有监督学习算法了.最开始接触SVM是去年暑假的时候,老师要求交<统计学习理论 ...

  7. sql sever 基础知识及详细笔记

    第六章:程序数据集散地:数据库 6.1:当今最常用的数据库 sql  server:是微软公司的产品 oracle:是甲骨文公司的产品 DB2:数据核心又称DB2通用服务器 Mysql:是一种开发源代 ...

  8. CPU工作方式、多核心、超线程技术详解[转贴]

    CPU是一台电脑的灵魂,决定电脑整体性能.现在的主流CPU都是多核的,有的运用了多线程技术(Hyper-threading,简称HT).多核可能还容易理解些,相信不少玩家都能说出个所以然.但超线程是个 ...

  9. Javascript/Jquery操作数组，增删改查以及动态创建HTML元素

    <html> <head> <title> New Document </title> <script src="~/Scripts/j ...

  10. windows下Maven的安装与配置

    1 安装maven前首先确认计算机已正确安装JDK2 下载maven 地址:http://maven.apache.org/download.html安装文件格式如下:apache-maven-3.0 ...