<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. Android 关于listView 显示不全的问题

    刚刚在项目中发现一个bug,我是用ScrollView 嵌套 ListView的,但是我的数据只能显示一条,开始我还以为是数据有错误,经过排查以后发现是正确的 百度发现 android的架构好像没有考 ...

  2. Android handler真的是重新启动一个线程吗？

    我们说handler是开启了另外一个线程,而且看代码的话确实是这样,实现了runnable接口,这在java中就是开启了一个线程,但是情况中的是这样吗?我们不妨来做个试验,如下 import andr ...

  3. Linux批量杀进程

    ps -ef |grep 进程名|grep -v grep |awk '{print $2}' |xargs kill -9

  4. c语言 快排排序

    快速排序(Quick Sort): 这个算法的霸气程度从它的名字就可以看出来了.快速排序的应用也是非常广的的,各种类库都可以看到他的身影.这当然与它的“快”是有联系的,正所谓天下武功唯快不破. 快速排 ...

  5. hibernate--关联映射（一对多）

    在对象模型中,一对多的关联关系,使用集合来表示. 实例场景:班级对学生:Classes(班级)和Student(学生)之间是一对多的关系. 对象模型: 多对一.一对多的区别: 多对一关联映射:在多的一 ...

  6. Drawable(5)关于从资源文件构造的Drawable不显示

    要给它设置个bounds才可以 TextView noticeHeaderView; TextView headerRefreshText; ProgressBar headerRefreshPgrs ...

  7. Android adb 常用技巧

    1.在命令行管理模拟器设备(AVD) list:列出机器上所有已经安装的Android版本和AVD设备 list avd:列出机器上所有已经安装的AVD设备: list target:列出机器上所有已 ...

  8. Android 面试题（经典）

    1.Actvity的生命周期,生命周期中的onCreate与onResume有什么区别 Activity的生命周期有:onCreate,onStart,onRestart,onResume,onPau ...

  9. CY7C68013A的一点总结

    一. 值得参考的资料:FX2 TechRefManual.USB应用开发宝典. LabVIEW-USB通信简单教程(用于参考生成labview驱动程序).USB设备请求和描述符整理(仅用于理解描述符的 ...

  10. LA 5846 (计数) Neon Sign

    从反面考虑,统计非单色三角形的个数. 如果从一个点出发两条不同颜色的边,那么这三个点一定构成一个非单色三角形. 枚举一个顶点,统计从这个点出发的红边的个数a[i]和蓝边的个数n - 1 - a[i], ...