Flex 项目属性：flex 布局示例

时间：2022-11-01 07:57:47

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>

页面：

Flex 项目属性：flex 布局示例

二、

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>

页面：

Flex 项目属性：flex 布局示例

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

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

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

  1. 弹性布局（display&colon;flex&semi;）属性详解

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

  2. CSS3总结五：弹性盒子&lpar;flex&rpar;、弹性盒子布局

    弹性盒子容器的属性与应用 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&period;CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

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

  6. CSS3 Flex布局整理&lpar;三&rpar;-项目属性

    一.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. 关于iOS开发证书的一些总结&lpar;很有用&rpar;

    今天出了个问题,具体是这样的,我把本地的钥匙传里面的各种东西全部清空了,结果出现了各种不可预料到问题.花了一下午的时间反复的测试,终于把证书的一些问题理顺,然后在这里做一些总结. 先看张图片: 其中, ...

  2. Ajax 填充 前端页面

  3. Java 默认&sol;缺省 server 还是 client 模式

    不多说,复制官方文档,适用于 Java 5 6 7 Architecture OS Default client VM if server-class, server VM; otherwise, c ...

  4. storm - 使用过程中的一点思考

    引子 这几天为了优化原有的数据处理框架,比较系统的学习了storm的一些内容,整理一下心得 1. storm提供的是一种数据处理思想,它不提供具体的解决方案 storm的核心是topo的定义,而top ...

  5. key&lowbar;t键和ftok函数

    系统建立IPC通讯(如消息队列.共享内存时)必须指定一个ID值.通常情况下,该id值通过ftok函数得到. ftok原型如下: key_t ftok( char * fname, int id ) f ...

  6. poj-3898 Software Industry Revolution DP

    题目链接: http://poj.org/problem?id=3898 题目意思: 有两个字符串,模式串和原串.每个字母有一个权值,a为1,b为2,...z为26 模式串中‘ ?’可以被一个字母代替 ...

  7. 最简单的基于FFmpeg的内存读写的例子：内存转码器

    ===================================================== 最简单的基于FFmpeg的内存读写的例子系列文章列表: 最简单的基于FFmpeg的内存读写的 ...

  8. python基础-列表&lpar;7&rpar;

    一.列表格式 列表名 = [列表元素1,列表元素2,列表元素3,… ] 说明: 列表元素之间是有顺序的,也是通过下标表示,第一个元素的小标为0. 列表元素可以不是同种类型,任何类型都行 列表通常当做容 ...

  9. CodeForce VKcup A

    题目描述:例如A-B,B-C是好朋友,那么A-C一定是好朋友,给一些点,和一些描述,观察是否成立 题目链接:点我 一个互相认识的团体,一定是每个点都和其他点相连的,那么边数为n(n-1)/2,把得到的 ...

  10. 深入理解ASP&period;NET MVC（5）

    系列目录 回顾 系列的前4节深入剖析了ASP.NET URL路由机制,以及MVC在此基础上是如何实现Areas机制的,同时涉及到inbound和outbound很多细节部分.第2节中提到MvcRout ...

相关文章