<style type="text/css">

	#outer{

		display: flex;

		width: 100%;

		flex-flow: row nowrap;

	}

	.left,.right{

		width:200px;

		height:50px;

		background: red;

	}

	.middle{

		flex-grow: 1;          //决定如何分配剩余空间

		background: yellow;

	}

</style>

<body>

	<div id="outer">

		<div class="left">left</div>

		<div class="middle">middle</div>

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

	</div>

　　

FLEX实现两侧边栏固定中间自适应布局的更多相关文章

  1. 【CSS】三栏/两栏宽高自适应布局大全

    页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...

  2. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  3. 巧用padding让图片宽高比固定并自适应布局

    1.从上图知道原始图片大小是 800 * 250,即宽高比为 3.2: 2.html 及 css 代码如下, 可以知道就只是在一个div里面放了一张图片,那么如何让这张图片的宽高比固定呢,看了css之 ...

  4. css布局之左侧固定右侧自适应布局

    参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...

  5. CSS 负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head>     <meta charset="UTF-8"& ...

  6. CSS负边距自适应布局三例

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title& ...

  7. css负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...

  8. 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  9. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

随机推荐

  1. Invoke与BeginInvoke

    一.为什么 Control类提供了 Invoke和 BeginInvoke机制? 关于这个问题的最主要的原因已经是 dotnet程序员众所周知的,我在此费点笔墨再次记录到自己的日志,以便日后提醒一下自 ...

  2. Linux Shell脚本读写XML文件

    在Linux下如何用Shell脚本读写XML?现有一个config.xml <?xml version="1.0" encoding="UTF-8"?&g ...

  3. QTP之对测试用例的自动化过程的分解

    第一部分:自动化一个测试用例 当你要开始自动化一个测试用例的时候,有一些重要的事情需要完成.当你完成所有这些事情的时候,测试脚本的自动化也随之完成. 在这里,我们将首先在大部分的自动化测试用例里找出所 ...

  4. C++ 打印输出指针

    大家想必在很多场景下需要打印输出指针地址.看一下下面的输出:       CObject* pObject = new CObject;     std::cout << pObject  ...

  5. Main()方法

    C#是从方法Main()开始执行的.这个方法必须是类或结构的静态方法,并且其返回类型必须是int或void .虽然显式指定p山屺修饰符是很常见的,因为按照定义,必须在程序外部调用该方法,但我们给该入口 ...

  6. cpan 配置

    $ cpan Cpan>o conf init 最主要的是配置镜像地址,试了下,还是香港的靠谱…… cpan中镜像地址列表:http://www.cpan.org/SITES.html 香港的镜 ...

  7. MySql开启跟踪

    使用 show variables like '%log%'; 查看general_log.log_output.general_log_file 更新为 set global general_log ...

  8. 详谈 Jquery Ajax 异步处理Json数据.

    啥叫异步,啥叫Ajax.咱不谈啥XMLHTTPRequest.通俗讲异步就是前台页面javascript能调用后台方法.这样就达到了无刷新.所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Aj ...

  9. Android设置布局背景为白色的三种方法

    一.在xml文件里可以直接设置: android:background="#ffffff" 其他颜色可以看这里;http://blog.csdn.net/yanzi1225627/ ...

  10. Matlab编程实例(2) 同期平均

    %多点同期平均 close all; clear all; pi = 3.14159; Samp2=input('您需要几组信号做同期平均?') Samp1=1000 %设置采样精度 t = lins ...