flex属性：

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

下面来看看使用项目属性flex的两个示例：

一、

CSS：

 <style>

         body{ margin:;padding:;font-size: 20px;font-weight:;text-align: center;line-height: 40px; }

         #header,#footer{ height: 80px;background-color: #aaa; }

         #content{ width: 100%;height: 600px;display: flex; }

         #content div:first-of-type{ width: 300px;background-color: #bbb;flex: 0 0 auto; }

         #content div:last-of-type{ background-color: #ccc;flex:; }

 </style>

HTML：

 <body>

     <div id="header">页眉</div>

     <div id="content">

         <div>左侧固定</div>

         <div>

             右侧自适应<br />

             左侧CSS属性：flex: 0 0 auto;<br />

             右侧CSS属性：flex: 1;

         </div>

     </div>

     <div id="footer">页脚</div>

 </body>

页面：

二、

CSS：

 <style>

         body{ margin:;padding:;overflow-x: hidden;font-size: 20px;font-weight:;text-align: center;line-height: 40px;}

         #header,#footer{ height: 80px;background: #aaa; }

         .content{ width: 100%;height: 500px;display: flex; }

         .content div:nth-of-type(1),.content div:nth-of-type(3){ width: 300px;flex: 0 0 auto;background-color: #bbb; }

         .content div:nth-of-type(2){ width: 500px;flex: 1 0 auto;background-color: #ccc; }

 </style>

HTML：

 <body>

     <div id="header">头部</div>

     <div class="content">

         <div>左侧固定</div>

         <div>

         中间自适应<br>

         左侧：flex: 0 0 auto;<br>

         中间：flex: 1 0 auto;<br>

         右侧：flex: 0 0 auto;<br>

         </div>

         <div>右侧固定</div>

     </div>

     <div id="footer">底部</div>

 </body>

页面：

代码可以直接复制到HTML页面运行，如果有不懂的地方请回顾Flex布局属性：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

文章乃参考、转载其他博客所得，仅供自己学习作笔记使用！！！

Flex 项目属性：flex 布局示例的更多相关文章

  1. 弹性布局（display:flex;）属性详解

    Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式.它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来. ...

  2. CSS3总结五：弹性盒子(flex)、弹性盒子布局

    弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...

  3. flex的使用以及布局

    1.添加flex属性后的区别 <style> body{ font-size:35px; } .flex-box{ display:flex; display: -webkit-flex; ...

  4. flex的使用以及布局 转载

    转 : http://www.cnblogs.com/waisonlong/p/6055020.html flex的使用以及布局   1.添加flex属性后的区别 1 2 3 4 5 6 7 8 9 ...

  5. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  6. CSS3 Flex布局整理(三)-项目属性

    一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...

  7. CSS3 flexbox 布局 ---- flex项目属性介绍

    现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设display:flex 变成flex 容器,默认主轴的方向为水平 ...

  8. flex 布局示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. flex弹性盒模型布局

    容器属性:1.flex-direction:项目的排列方向(1)row 主轴方向排列(2)row-reverse 主轴反方向排列(3)column 纵向排列(4)column-reverse 纵向反方 ...

随机推荐

  1. Visual Studio 开发（一）：安装配置Visual Studio Code

    一.为何使用Visual Studio Code 在学习音视频开发的时候,使用到了C和C++,在回顾复习C和C++的知识的时候,需要编写一些代码来加强理解. 虽然,有在线的语言编辑工具https:// ...

  2. 继承user表需要配置

    AUTH_USER_MODEL = 'users.User'   (应用名.模型类名)

  3. 第60节:Java中的JavaScript技术

    欢迎到我的简书查看我的文集 前言: JavaScript是什么呢?它是一种基于对象和事件驱动的脚本语言,主要是应用于客户端上的.JavaScript它可以做到信息的动态交互,具有交互性,它不允许直接访 ...

  4. Ubuntu双网卡设置内外网上网的问题

    UBUNTU16.04系统,双网卡:eth0, eth1.分贝设置成Public IP, 和局域网IP, 这样这台计算机就可以访问局域网内的各个IP, 同时还可以在全球各地被访问,使用ssh or r ...

  5. 机器学习入门12 - 分类 (Classification)

    原文链接:https://developers.google.com/machine-learning/crash-course/classification/ 1- 指定阈值 为了将逻辑回归值映射到 ...

  6. Java数据库操作（MySQL与SQLserver）

    在java编程开发中,数据库的开发是重头戏. MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品: SQL Server是由Microsoft开发 ...

  7. mysql 开发进阶篇系列 49 表的数据导出(into outfile，mysqldump)

    一.概述 在数据库的日常维护中,表的导入和导出是很频繁的操作,本篇讲解如何使用导入功能,并以案例为演示.某些情况下,需要将表里的数据导出为某些符号分割的纯数据文本,而不是sql语句,比如:(1)用来作 ...

  8. 在linux上安装svn

    1. 安装svn 输入命令:yum -y install subversion 检查是否安装成功: 输入命令:svn –version 2. 创建代码仓库 输入命令:mkdir -p /usr/loc ...

  9. jdk中的简单并发，需要掌握

    前言 开心一刻 小时候有一次爸爸带我去偷村头别人家的梨子,我上树摘,爸爸在下面放风,正摘着主人来了,爸爸指着我破口大骂:臭小子,赶紧给我滚下来,敢偷吃别人家梨子,看我不打死你.主人家赶紧说:没事没事, ...

  10. 如何用Python编写一个聊天室

    一.课程介绍 1.简介 本次项目课是实现简单聊天室程序的服务器端和客户端. 2.知识点 服务器端涉及到asyncore.asynchat和socket这几个模块,客户端用到了telnetlib.wx. ...