<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. NFC(1)NFC简介,3种模式

    简介 NFC(Near Field Communication,近场通信),是一种数据传输技术.但与Wi-Fi.蓝牙.红外线等数据传输技术的一个主要差异就 是有效距离一般不能超过4厘米. NFC支持如 ...

  2. 查看Linux服务器网络状态

    ifconfig 用来显示所有网络接口的详细情况的,如:ip地址,子网掩码等. ethx是以太网网卡的名称. 配置文件在/etc/sysconfig/network-scripts/ifcfg-eth ...

  3. POJ 2455 - Secret Milking Machine

    原题地址:http://poj.org/problem?id=2455 题目大意:给出一个N个点的无向图,中间有P条边,要求找出从1到n的T条通路,满足它们之间没有公共边,并使得这些通路中经过的最长的 ...

  4. bzoj2797

    对和排序,显然最小是a1+a2,次小a1+a3 然后穷举哪里是a2+a3 这样a1,a2,a3就求出来了 注意a2+a3只可能是前n+1项中的一个,所以穷举这步是O(n)的 接下来我们把已经确定的数的 ...

  5. MyBatis 实践 -配置

    MyBatis 实践 标签: Java与存储 Configuration mybatis-configuration.xml是MyBatis的全局配置文件(文件名任意),其配置内容和顺序如下: pro ...

  6. LinQ综合应用实例

    直接上代码,内容很浅显易懂,在这里就不做更多的解释,解释见代码注释. using System; using System.Collections.Generic; using System.Linq ...

  7. UVa 11489 (博弈) Integer Game

    一个数字能被3整除就等价于这个数的各个数字之和被3整除. 所以一开始的时候先要拿一个能使剩下的数字是3的倍数的数. 然后就一直拿0.3.6.9直到某人不能再拿为止. #include <cstd ...

  8. Selenium Tutorial (1) - Starting with Selenium WebDriver

    Starting with Selenium WebDriver Selenium WebDriver - Introduction & Features How Selenium WebDr ...

  9. 【iOS-Cocos2d游戏开发之四】独自收集Cocos2d提供的字体！共57种（有对照的字体图）

    本站文章均为李华明Himi原创,转载务必在明显处注明:(作者新浪微博:@李华明Himi) 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-c ...

  10. linux lnmp编译安装

    关闭SELINUX vi /etc/selinux/config #SELINUX=enforcing #注释掉 #SELINUXTYPE=targeted #注释掉 SELINUX=disabled ...