实例

让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容:

  1. #main div
  2. {
  3. flex:1;
  4. }
复制

效果预览


浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。


定义和用法

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意:如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。

默认值: 0 1 auto
继承:
可动画化: 是,参见个别的属性。请参阅 CSS3动画属性CSS3动画实例
版本: CSS3
JavaScript 语法: object.style.flex="1" 效果预览

CSS 语法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

属性值

描述
flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto 与 1 1 auto 相同。
none 与 0 0 auto 相同。
initial 设置该属性为它的默认值,即为 0 1 auto。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

Flexible 弹性盒子模型之flex的更多相关文章

  1. Flexible 弹性盒子模型之CSS flex-flow

    实例 让弹性盒的元素以相反的顺序显示,且在必要的时候进行拆行: display:flex; flex-flow:row-reverse wrap;   效果预览 浏览器支持 表格中的数字表示支持该属性 ...

  2. Flexible 弹性盒子模型之CSS justify-content 属性

    实例 在弹性盒对象的 <div> 元素中的各项周围留有空白: div { display: flex; justify-content: space-around; } 复制 效果预览 浏 ...

  3. Flexible 弹性盒子模型之CSS flex-direction

    实例 设置 <div> 元素内弹性盒元素的方向为相反的顺序: div { display:flex; flex-direction:row-reverse; } 复制 效果预览 浏览器支持 ...

  4. Flexible 弹性盒子模型之CSS align-self 属性

    实例 居中对齐弹性对象元素内的某个项: #myBlueDiv { align-self:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -w ...

  5. Flexible 弹性盒子模型之CSS align-items 属性

    实例 居中对齐弹性盒的各项 <div> 元素: div { display: flex; align-items:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性 ...

  6. Flexible 弹性盒子模型之CSS flex-wrap 属性

    实例 让弹性盒元素在必要的时候拆行: display:flex; flex-wrap: wrap; 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webki ...

  7. Flexible 弹性盒子模型之CSS flex-basis 属性

    实例 设置第二个弹性盒元素的初始长度为 80 像素: div:nth-of-type(2){flex-basis:80px;}   效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本 ...

  8. Flexible 弹性盒子模型之CSS flex-shrink 属性

    实例 让第二个元素收缩到其他元素的三分之一: 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 - ...

  9. Flexible 弹性盒子模型之CSS flex-grow 属性

    实例 让第二个元素的宽度为其他元素的三倍: div:nth-of-type(1){flex-grow:1;} div:nth-of-type(2){flex-grow:3;} div:nth-of-t ...

随机推荐

  1. 精简的javascript下throttle和debounce代码

    //频率控制 函数连续调用时,fn 执行频率限定为 1次/waitMs.立即执行1次 function throttle(fn, waitMs) { var lastRun = 0; return f ...

  2. ADB server didn&#39;t ACK

    当我们通过eclipse开发Android应用时,会连接真机会使用模拟器进行仿真,有时候启动失败,会提示这样的错误. 工具/原料 Eclipse CMD命令窗口 方法/步骤 首先通过CMD启动adb服 ...

  3. andriod studio

    初衷:使用andriod的webview调用html页面,生成app. AVD注意细节: RAM : 1G VM heap:228MB Graphics:software - GLES 2.0 存在的 ...

  4. Java连接池详解

    于共享资源,有一个很著名的设计模式:资源池(Resource Pool).该模式正是为了解决资源的频繁分配﹑释放所造成的问题.为解决我们的问题,可以采用数据库连接池技术.数据库连接池的基本思想就是为数 ...

  5. Android -- 通知栏的使用

    1. 效果图

  6. NDK开发总结

    NDK开发差不多结束了, 估计后面也不会再碰了诶, 想着还是写个总结什么的,以后捡起来也方便哈.既然是总结,我这里就不会谈具体的细节,只会记录下我觉得重要的东西, 所以这篇随笔不是为萌新学习新知识准备 ...

  7. linux根分区扩容

    Linux 根分区扩容 1.fdisk –l  (红线部分为新添加的硬盘) 2.磁盘格式化 3. mkfs.ext3 -T largefile /dev/sde(格式化上面的分区) 4. vgdisp ...

  8. LightOJ1025 The Specials Menu(区间DP)

    给一个字符串,问有几种删字符的方式使删后的非空字符串是个回文串. 当然区间DP:dp[i][j]表示子串stri...strj的方案数 感觉不好转移,可能重复算了.我手算了"AAA" ...

  9. SQL Server select 将类型相同的行合并

    select Category from(select distinct Category from T_Detail where CREATED_BY= @CREATED_BY AND Record ...

  10. APP store 官方统计工具的常见的Q&amp;A

    Apple最近在iTunesConnect里最新发布了官方统计工具,提供了现有友盟统计平台和自有统计平台无法统计的数据,具有自己的独有特点,尤其是下面几个最让人头疼的流量分析转化,可以在App Ana ...