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. 腾迅云获取免费SSL证书并布置

    上次申请了SSL证书一直没时间布置,今天重新再来操作一次 首先需要申请SSL证书,腾迅云买的域名有免费一年的SSL证书申请,网址:https://console.cloud.tencent.com/s ...

  2. python写的压缩软件

    import tkinterimport tkinter.filedialogimport osimport zipfileimport tkinter.messagebox #创建住窗口root = ...

  3. 吴恩达机器学习笔记19-过拟合的问题（The Problem of Overfitting）

    到现在为止,我们已经学习了几种不同的学习算法,包括线性回归和逻辑回归,它们能够有效地解决许多问题,但是当将它们应用到某些特定的机器学习应用时,会遇到过拟合(over-fitting)的问题,可能会导致 ...

  4. 小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸

    小程序页面跳转传参 根目录下的 app.json 文件 页面文件的路径.窗口表现.设置网络超时时间.设置多 tab { "pages": [ "pages/index/i ...

  5. Android精通之AsyncTask与ListView讲解

    版权声明:未经博主允许不得转载 AsyncTask 了解AsyncTask异步,需要了解一下异步任务(多线程),什么是线程,可以这么说线程好比边吃饭边看电视,AsyncTask是为了方便后台线程中操作 ...

  6. jetty8 text/plain默认字符编码的坑

    今天在测试一个content-type为text/plain的API时发现后端requestBody乱码了,而线上正常. 自己本地使用jetty8版本,插件自带版本,而线上使用jetty9. 最开始没 ...

  7. while true 死循环判断端口按顺序启动应用

    需求:spring微服务应用启动较慢并且要求一个应用启完才能启第二个应用. 思路:加了个while true 死循环判断端口启动了才启下一个应用. 执行方式:/appupgrade/spring_cl ...

  8. 向上造型中让我入坑的地方 (><)

    今天周六,闲着蛋疼就报名参加了公司的一个java比赛,比赛地点某某大厦11楼会议室,想象中应该是能容纳上百人的超大会议室.没成想,到地方一看,只是一个能容纳六七人的有圆形会议桌的小会议室.不过这仍然不 ...

  9. 项目实战1—LNMP的搭建、nginx的ssl加密、身份验证的实现

    总项目流程图,详见 http://www.cnblogs.com/along21/p/8000812.html 实战一:搭建lnmp及类小米等商业网站的实现 环境:关闭防火墙,selinux 1.安装 ...

  10. vs javascript intellisence失效

    前些天写js的时候发现vs的提示都没了...纳闷但是没去了解原因. 今天实在是受不了了. 网上搜了一下,看到msdn文档上一句话,“通过使用 reference 指令,Visual Studio 能够 ...