<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. <<c 和指针 >> 部分笔记。

    最近竟然对指针有些迷惑了,分不清指针的指向.废话少说,复习.(下面内容来自<<c和指针>>) =指针 ==内存和地址 尽管一个字包含了4个字节,它仍然只有一个地址.至于是最左边 ...

  2. 富有魅力的git stash

    git stash 会把当前的改动暂时搁置起来, 也就是所谓的git 暂存区. 你可以执行 git stash list 来查看你所有暂存的东东. 也可以 git stash apple ** 来拿下 ...

  3. 01-语言入门-01-A+B Problem

    题目地址: http://acm.nyist.net/JudgeOnline/problem.php?pid=1    描述 此题为练手用题,请大家计算一下a+b的值   输入 输入两个数,a,b 输 ...

  4. TeeChart的X轴为时间，多个Y轴的显示

    最后上代码 public partial class Test : Form { private TChart tChart = new TChart(); ; public Test() { Ini ...

  5. Android Studio修改包名和applicationId的方法

    背景: 如果新做的项目跟以前做的某一个项目十分相似,那么一个简单的方法就是把原来项目拷贝一份,然后修改代码,但是这样包名还是原来项目的包名,还有如果想在同一台手机上同时安装新做的app和原来的app会 ...

  6. JSOI2015 分组赛记

    分组赛结束了,虽然跟我关系不大,但是去了还是学到了不少东西 day1 上午报到,在宾馆遇到大神wzy,orz 好像没有参赛证发了,于是给我发了一个[工作证],233我是工作人员了,高贵冷艳 下午是常中 ...

  7. UVa 11722 (概率 数形结合) Joining with Friend

    高中也做个这种类似的题目,概率空间是[t1, t2] × [s1, s2]的矩形,设x.y分别代表两辆列车到达的时间,则两人相遇的条件就是|x - y| <= w 从图形上看就是矩形夹在两条平行 ...

  8. 通过Instant Client包来使用SQL*PLUS

    1.首先下载两个程序包: Instant Client Package - Basic(或Instant Client Package - Basic Lite)包 Instant Client Pa ...

  9. linux 安装oracle 11g

    安装环境 Linux服务器:SuSe10 sp2 64位 Oracle服务器:Oracle11gR2 64位 系统要求 Linux安装Oracle系统要求 系统要求 说明 内存 必须高于1G的物理内存 ...

  10. 【转】定时器、sigevent结构体详解

    原文网址:http://blog.163.com/zheng_he_xiang/blog/static/18650532620116311020390/ 最强大的定时器接口来自POSIX时钟系列,其创 ...