如图：

代码如下：

 <!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. Oculus Store游戏下载默认路径修改方法

    最近在测试一款VR游戏,所以在硬件设备上选择了HTC Vive和Oculus两款眼镜.相对而言,HTC安装比较人性化:支持自定义安装路径,而且可在界面更改应用程序下载位置,如图所示: 这下替我节省了不 ...

  2. 洗礼灵魂，修炼python（3）--从一个简单的print代码揭露编码问题，运行原理和语法习惯

    前期工作已经准备好后,可以打开IDE编辑器了,你可以选择python自带的IDLE,也可以选择第三方的,这里我使用pycharm--一个专门为python而生的IDE 按照惯例,第一个python代码 ...

  3. Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals)

    http://codeforces.com/contest/831 A. Unimodal Array time limit per test 1 second memory limit per te ...

  4. MYSQL解压版安装说明

    一. zip格式,解压缩之后要进行配置.解压之后可以将该文件夹改名,放到合适的位置,比如把文件夹改名为MySQL(文件夹 MySQL下面就是 bin, data,my-default.ini 等) 二 ...

  5. JavaWeb（七）之详解JavaWeb路径

    前言 在我们的实际开发中,经常要写路径,不管是链接,重定向还是转发,这都是需要路径的.那这一篇我给大家详细的分享一下Web中的各种路径问题. 世界上一切东西都是相对的,对于这点而言,相信大家并不陌生, ...

  6. 江西省移动物联网发展战略新闻发布会举行-2017年10月江西IDC排行榜与发展报告

    编者按:当人们在做技术创新时,我们在做“外包产业“:当人们在做制造产业,我们在做”服务产业“:江人们在做AI智能时,我们在做”物联网“崛起,即使有一个落差,但红色热土从不缺少成长激情. 本期摘自上月初 ...

  7. oracle开启一个用户

    我的工具,PL/SQL Developer(其他工具大同小意) 1.用系统管理员账号登入数据库    账号是:sys,   connect as:sysdba  登入进入如下页面. 2.查看所有用户( ...

  8. Shell一个文件并等待完成

    Option Explicit Private Declare Function OpenProcess Lib "kernel32" _ (ByVal dwDesiredAcce ...

  9. 接口自动化测试方案PHP + mysql

    接口测试在测试工作中是很常见的工作,但是在以往的接口测试工作中借助的一般是第三方插件.python开发的发送请求脚本.LR脚本.Jmeter脚本,之前也使用python开发了一套接口自动化测试系统,但 ...

  10. win10 uwp 打包第三方字体到应用

    有时候我们会把一些特殊字体打包到软件,因为如果找不到我们的字体会变为默认,现在很多字体图标我们用得好,有时候我们的应用会用很漂亮的字体,需要我们自己打包,因为用户一般是没有字体. UWP使用第三方字体 ...