如图：

代码如下：

 <!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. React的组件用法

    React.createClass() 中文翻译 https://discountry.github.io/react/3.4K ( https://doc.react-china.org868 ) ...

  2. 看源码和写demo是一种比较容易提升的方式

    github就是要这么用才行.看别人的源码,就能了解到很多规范,而写demo,就是自己写出自己的代码.莫欺少年穷

  3. Qt学习之路MainWindow学习过程中的知识点

    一.Qt的GUI程序有一个常用的顶层窗口,叫做MainWindow MainWindow继承自QMainWindow.QMainWindow窗口分成几个主要的区域:   二.QAction类 QAct ...

  4. 写一个ORM框架的第一步

    新一次的内部提升开始了,如果您想写一个框架从Apache Commons DbUtils开始学习是一种不错的选择,我们先学习应用这个小“框架”再把源代码理解,然后写一个属于自己的ORM框架不是梦. 一 ...

  5. Python实战之用类的静态方法实现登录验证

    #!usr/bin/env Python3 # -*-coding:utf-8-*- __author__="William" #define a class,just to le ...

  6. python检查IP地址正确性

    一.自动动手,丰衣足食 #encoding=utf-8 import os,sys def check_ip(ipaddr): addr = ipaddr.strip().split('.') #切割 ...

  7. Silverlight:telerik RadControls for Silverlight 主题使用心得

    默认情况下: telerik RadControls控件使用的是Office Black 主题,就算在App.xaml.cs里写上 StyleManager.ApplicationTheme = ne ...

  8. mybatis 和hibernate的区别

    mybaits 是不完全的orm(对象关系映射(Object Relational Mapping)框架,需要自己书写sql语句 mybatis学习难度必hibernate低适合关系型模型要求不高的软 ...

  9. 如何使用 C# 爬虫获得专栏博客更新排行

    昨天,梦姐问我们,她存在一个任务,找到 关注数排行100 和 浏览量排行100 的专栏博客,在2017年还有更新的专栏. 梦姐说他要出去一趟,M大神在吃饭,于是我估算时间,只有半个钟. 整理一下:半个 ...

  10. 张高兴的 Windows 10 IoT 开发笔记：RTC 时钟模块 DS3231

    GitHub:https://github.com/ZhangGaoxing/windows-iot-demo/tree/master/DS3231 注意:不包含闹钟设置