Flexible 弹性盒子模型之flex
浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
紧跟在 -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-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的更多相关文章
- 弹性盒子模型display:flex
1.div上下左右居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- Flexible 弹性盒子模型之CSS flex-flow
实例 让弹性盒的元素以相反的顺序显示,且在必要的时候进行拆行: display:flex; flex-flow:row-reverse wrap; 效果预览 浏览器支持 表格中的数字表示支持该属性 ...
- Flexible 弹性盒子模型之CSS justify-content 属性
实例 在弹性盒对象的 <div> 元素中的各项周围留有空白: div { display: flex; justify-content: space-around; } 复制 效果预览 浏 ...
- Flexible 弹性盒子模型之CSS order 属性
实例 设置弹性盒对象元素的顺序: div#myRedDIV {order:2;} div#myBlueDIV {order:4;} div#myGreenDIV {order:3;} div#myPi ...
- Flexible 弹性盒子模型之CSS flex-direction
实例 设置 <div> 元素内弹性盒元素的方向为相反的顺序: div { display:flex; flex-direction:row-reverse; } 复制 效果预览 浏览器支持 ...
- Flexible 弹性盒子模型之CSS align-self 属性
实例 居中对齐弹性对象元素内的某个项: #myBlueDiv { align-self:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -w ...
- Flexible 弹性盒子模型之CSS align-items 属性
实例 居中对齐弹性盒的各项 <div> 元素: div { display: flex; align-items:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性 ...
- Flexible 弹性盒子模型之CSS flex-wrap 属性
实例 让弹性盒元素在必要的时候拆行: display:flex; flex-wrap: wrap; 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webki ...
- Flexible 弹性盒子模型之CSS flex-basis 属性
实例 设置第二个弹性盒元素的初始长度为 80 像素: div:nth-of-type(2){flex-basis:80px;} 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本 ...
随机推荐
- git提交项目到已存在的远程分支
今天想提交项目到github的远程分支上,那个远程分支是之前就创建好的,而我的本地关联分支还没创建. 之前从未用github提交到远程分支过,弄了半个钟,看了几篇博文,终于折腾出来.现在把步骤整理 ...
- linux常用查看硬件设备信息命令
转载:http://blog.chinaunix.net/uid-26782198-id-3242120.html # uname -a # 查看内核/操作系统/CPU信息 ...
- 学习笔记 :DrawText
最近在做一个TStringGrid的自绘处理,在画文字处理上遇到了高度的计算问题.后来经过一段时间还是找到了一些方法: 1.使用TLabel 这个方法是有点绕路的,方法倒是简单,就是使用AutoSiz ...
- C#执行异步操作的几种方式比较和总结
C#执行异步操作的几种方式比较和总结 0x00 引言 之前写程序的时候在遇到一些比较花时间的操作例如HTTP请求时,总是会new一个Thread处理.对XxxxxAsync()之类的方法也没去了解过, ...
- CORS简介
现在请跟我做:在您的浏览器的地址栏中输入www.yhd.com并敲击回车.在网站内容全部加载完毕后,按F12打开浏览器的调试窗口.当切换到Sources页时,您会发现您当前所看到的一号店的页面是从多个 ...
- 我认为JS还可以改进的点
曾经我一度在寻找JS的替代语言,尝试过CoffeeScript/TypeScript/Dart(都是浅尝).不为什么原因,而是当你写的越多的JS,越觉得JS很多时候显得很操蛋.好在ES2015和Bab ...
- 如何扩展 Visual Studio 编辑器
在 Visual Studio 2010 的时代,扩展 Visual Studio 的途径有很多,开发者可以选择宏.Add-in.MEF 和 VSPackages 进行自定义的扩展.但是宏在 Visu ...
- PHP 调用webService方式
方法如下: <?php header('Content-Type: text/html; charset=UTF-8'); define('APP_ROOT', dirname(__FILE__ ...
- [原创]关于ORACLE的使用入门
Oracle===============================数据库:Oracle------>甲骨文(Oracle) 49+%DB2---------->IBM 49+%Sq ...
- CSS系列目录
1. 在HTML中引入CSS的方法 2. CSS选择器 2.1 CSS3新增选择器 3. CSS的继承与层叠特性 4. CSS中盒子模型 5. CSS中盒子之间的关系 6. CSS中盒子的 ...