如图：

代码如下：

 <!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. JS -- Variables As Properties

    Variables As Properties When you declare a global JavaScript variable, what you are actually doing i ...

  2. Undefined symbols for architecture arm64: "_OBJC_CLASS_$_WKWebView", referenced from: objc-c

    出现: Undefined symbols for architecture arm64: "_OBJC_CLASS_$_WKWebView", referenced from: ...

  3. 快速双边滤波 附完整C代码

    很早之前写过<双边滤波算法的简易实现bilateralFilter>. 当时学习参考的代码来自cuda的样例. 相关代码可以参阅: https://github.com/johng12/c ...

  4. poj1014二进制优化多重背包

    Dividing Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 53029   Accepted: 13506 Descri ...

  5. bzoj1051（明星奶牛）

    这道就是明星奶牛,A了一次又一次了,(⊙o⊙)-(⊙o⊙)- 去年pas就打了不下5次,就是强联通缩点,然后求出度为0的块 判断有多个的话就无解,一个就输出块的大小. #include<cstd ...

  6. java基础解析系列(八)---fail-fast机制及CopyOnWriteArrayList的原理

    fail-fast机制及CopyOnWriteArrayList的原理 目录 java基础解析系列(一)---String.StringBuffer.StringBuilder java基础解析系列( ...

  7. 关于AVALON总线动态地址对齐

    在NIOS的使用中,我们往往要用到自定义外设,然后通过AVALON交换架构和NIOSII进行通信. AVALON总线,其实是一种交换架构的协议,在自定义外设挂在AVALON总线上时,一定要注意地址对齐 ...

  8. 华为olt ma5680t常用命令详解

    进入待替换的故障ONU所注册的单板 interface epon 0/1         //此处可以通过查看PON口下设备状态来获取需要替换的ONU ID.假设故障设备位于2端口,ID为6 ont ...

  9. IDL 使用数组

    1.下标方式 IDL> array=indgen(8) IDL> print,array 0 1 2 3 4 5 6 7 IDL> print,array[3] IDL> ar ...

  10. Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...