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. Javascript高级编程学习笔记（25）—— 函数表达式（3）模仿块级作用域

    昨天写了闭包 今天就来聊聊块级作用域的事情 在绝大多数编程语言中,都有块级作用域这个概念 什么是块级作用域呢? 前面我们在刚开始讲的时候说过,JS中的大括号(不在赋值运算符的后面)表示代码块 块级作用 ...

  2. Python面向对象4：类的相关函数与属性

    1 类相关函数- issubclass:检测一个类是否是另一个类的子类- isinstance:检测一个对象是否是一个类的实例- hasattr:检测一个对象是否由成员xxx- getattr: ge ...

  3. python(leetcode)-48旋转图像

    给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使用另一个矩阵来旋转图像. 示例 1: 给定 m ...

  4. word标题文字居中浅谈

    在Word排版时,要将标题在文档居中,是有区别的,如下图 在回车键后,在选择标题居中,我们常认为标题就是在整个文档居中了,但是实际上只是在回车键到右边区域居中而已,如上图红色方块居中. 只有在标题文字 ...

  5. docker镜像打包save，载入load，启动run

    docker打包,针对的是镜像,而不是运行中的容器. 查看当前系统的镜像文件:docker images 将当前运行中的,已经自定义修改后的容器保存为新的镜像. docker commit ce11e ...

  6. [Maven]Maven如何得到单独的单元测试报告

    ----------------------------------------------------------------- 原创博文,如需转载请通知作者并注明出处! 博主:疲惫的豆豆 链接:h ...

  7. 使用CodeSmith 生成代码

    CodeSmith是一款优秀的代码生成工具.在ORM中,它能帮助我们生成实体类.XML配置文件,从而简化了我们一部分的开发工作.下面简要说说它的基本用法. 1.  打开CodeSmith,创建一个模板 ...

  8. leetcode — sqrtx

    /** * Source : https://oj.leetcode.com/problems/sqrtx/ * * * Implement int sqrt(int x). * * Compute ...

  9. leetcode — next-permutation

    import java.util.Arrays; /** * Source : https://oj.leetcode.com/problems/next-permutation/ * * Creat ...

  10. openssl dhparam(密钥交换)

    openssl系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html openssl dhparam用于生成和管理dh文件.dh(Diffie-H ...