<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. Image.FrameDimensionsList 属性-----具体使用案例

    上一篇中说到了图片的具体产生以及属性,本篇主要是具体的使用,详情案例见下面的具体视图及代码 using System;using System.Collections.Generic;using Sy ...

  2. Androidz之Activity概要学习

    Androidz之Activity概要学习 1.     Activity类概述 Activity(活动)是一个单独的.能获取焦点的,且能与用户交互的东西.所以我们通常在Activity类中的onCr ...

  3. 面试题_ Java EE 相关的面试题

    为了做 Java EE 的朋友,这里列出了一些 web 开发的特定问题,你们可以用来准备 JEE 部分的面试: 10 大 Spring 框架面试题及答案(参见)10 个非常好的 XML 面试问题(Ja ...

  4. MySQL增加列，移动列

    ALTER TABLE test ADD COLUMN id INT UNSIGNED NOT NULL auto_increment PRIMARY KEY FIRST 给表添加列是一个常用的操作, ...

  5. JS创建类以及类的方法（StringBuffeer类）

    创建StringBuffer类以及toString,append()方法 //创建一个StringBuffer类 ,此类有两个方法:一个是append方法一个是toString方法 function ...

  6. 函数 page_dir_get_n_heap

    查看某page中含有的记录个数 #define PAGE_N_HEAP 4 /* number of records in the heap, bit =flag: new-style compact ...

  7. RESTful API 设计最佳实践(转)

    背景 目前互联网上充斥着大量的关于RESTful API(为方便,下文中“RESTful API ”简写为“API”)如何设计的文章,然而却没有一个”万能“的设计标准:如何鉴权?API 格式如何?你的 ...

  8. test chemes

    rcmobile://messages rcmobile://badge rcmobile://dialer rcmobile://open rcmobile://sms?type=new

  9. Dataguard三种保护模式

    Oracle Data Guard 提供三种高水平的数据保护模式来平衡成本.可用性.性能和事务保护.可以使用任意可用管理界面来轻松地设置这些模式.要确定适当的数据保护模式,企业需要根据用户对系统响应时 ...

  10. 学习Mongodb(一)

    图片摘录自陈彦铭出品2012.5的<10天掌握MongDB> MongoDB的特点--->面向集合存储,易于存储对象类型的数据--->模式自由--->支持动态查询---& ...