<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. Servlet中如何实现页面转发

    在Servlet中实现页面转发主要是利用RequestDispatcher接口实现的.此接口可以把一个请求转发到另一个JSP页面上.     forward():把请求转发到服务器上的另一个资源.   ...

  2. Tomcat的SessionID引起的Session Fixation和Session Hijacking问题

    上一篇说到<Spring MVC防御CSRF.XSS和SQL注入攻击>,今天说说SessionID带来的漏洞攻击问题.首先,什么是Session Fixation攻击和Session Hi ...

  3. QTP数据驱动之读取Excel数据

    这个代码的原理是把Excel的数据当做数据库里的数据一样处理,可以对Excel用select来检索需要的数据,然后把数据以键值对的形式保存到oDict里,方便在用例层来调用 Class oDataDi ...

  4. Java解压上传zip或rar文件，并解压遍历文件中的html的路径

    1.本文只提供了一个功能的代码 public String addFreeMarker() throws Exception { HttpSession session = request.getSe ...

  5. oracle lsnrctl status|start|stop

    [oracle@redhat4 ~]$ lsnrctl status LSNRCTL for Linux: Version 11.2.0.1.0 - Production on 06-OCT-2015 ...

  6. launch genymotion simulator from command line

    Command to launch genymotion headless - player --vm-name Nexus_4 if player is not already added to p ...

  7. WebActivatorEx

    using System; using NLog; using System.Web.Optimization; [assembly: WebActivatorEx.PreApplicationSta ...

  8. bzoj1997: [Hnoi2010]Planar

    2-SAT. 首先有平面图定理 m<=3*n-6,如果不满足这条件肯定不是平面图,直接退出. 然后构成哈密顿回路的边直接忽略. 把哈密顿回路当成一个圆, 如果俩条边交叉(用心去感受),只能一条边 ...

  9. UVa 11584 Partitioning by Palindromes【DP】

    题意:给出一个字符串,问最少能够划分成多少个回文串 dp[i]表示以第i个字母结束最少能够划分成的回文串的个数 dp[i]=min(dp[i],dp[j]+1)(如果从第j个字母到第i个字母是回文串) ...

  10. ASP.NET MVC Html.BeginForm用法1

    Html.BeginForm():该方法用于构建一个From表单的开始, 他的构造方法为:Html.BeginForm("ActionName","ControllerN ...