如图：

代码如下：

 <!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. 黑马程序员Java基础班+就业班课程笔记全发布（持续更新）

    正在黑马学习,整理了一些课程知识点和比较重要的内容分享给大家,也是给自己拓宽一些视野,仅供大家交流学习,大家有什么更好的内容可以发给我 ,现有黑马教程2000G  QQ 1481135711 这是我总 ...

  2. 批处理之 for/f 详解

    含有/F的for格式:FOR /F ["options"] %%i IN (file) DO command FOR /F ["options"] %%i IN ...

  3. hdu4632

    Palindrome subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65535 K (Java/ ...

  4. Ansible(二) - 配置及命令简介

    Ⅰ. Ansible Inventory Hosts文件配置 # mkdir /etc/ansible # touch /etc/ansible/hosts # cat /etc/hosts 127. ...

  5. Centos7虚拟机桥接模式

    主机ping不通虚拟机centos7系统的ip大多有以下原因: 1.主机与centos7ip段对应 (关键是网关.dns服务器要一一对应,具体操作见后文) 2.对应后仍然不通的,可关闭主机与cenos ...

  6. FPGA在其他领域的应用(二)

    计算机和存储领域: 计算机技术和存储技术发展迅猛.如今,云计算正在实现对传统 IT 功能和全新功能的整合.例如,许多大型数据中心目前正在同时提供传统的 IT 服务以及新型的数据分析服务. 因此,这些大 ...

  7. DOM 节点 课程表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 浅谈oracle树状结构层级查询测试数据

    浅谈oracle树状结构层级查询 oracle树状结构查询即层次递归查询,是sql语句经常用到的,在实际开发中组织结构实现及其层次化实现功能也是经常遇到的,虽然我是一个java程序开发者,我一直觉得只 ...

  9. 80端口被系统服务【kernel&System】占用解决方案

    netstat -ano | findstr port    //查看端口占用情况 tasklist | findstr port   //查看端口被占用的具体服务名 运行net stop http ...

  10. linux 投影仪

    注:文章转自http://goo.gl/aI9Ycd如果侵权,请原作者留言,立即删除 之前在 R219 做 C++ 演講的時候,發現 Ubuntu 沒有辦法使用 VGA 輸出,臨時改用 Windows ...