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;} 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本 ...
随机推荐
- iOS10之Expected App Behaviors
昨天上架到appStore的时候碰到个问题,构建好后上传到itunesconnect的的包都用不了, 显示错误为:此构建版本无效. 或者英文显示为:ITC.apps.preReleaseBuild.e ...
- 关系型数据库与NoSQL数据库
关系型数据库的优缺点 优点: 可以做事务处理,从而保证了数据的一致性: 可以进行JOIN等多表查询: 由于以SQL标准化为前提,数据更新的开销很小(相同的字段基本上都只有一处). 缺点: 大量数据的写 ...
- CacheManager:–个通用缓存接口抽象类库
CacheManager是–个缓存通用接口抽象类库,它支持各种高速缓存提供者,例如Memcache,Redis,并且有许多先进的功能特性.具体可以访问官方网站 http://cachemanager ...
- Fedora 24中的日志管理
Introduction Log files are files that contain messages about the system, including the kernel, servi ...
- Spark笔记:RDD基本操作(上)
本文主要是讲解spark里RDD的基础操作.RDD是spark特有的数据模型,谈到RDD就会提到什么弹性分布式数据集,什么有向无环图,本文暂时不去展开这些高深概念,在阅读本文时候,大家可以就把RDD当 ...
- 反编译.NET工程
工具: 1. .Net Reflector 2. 远程桌面 步骤: 1. 远程桌面连接到服务器 IP,port,user,pwd 2. 打开 IIS 这里面就是所部属的网 ...
- js自动提示查询添加功能(不是自动补全)
在工作中遇到查询某些数据,并添加到一个列表里的时候,写了一个小功能. 优点: 1.纯手工JS代码,不需要任何js框架,复制下来就能测试,无毒副作用. 2.通过模糊查询快速定位数据,并添加到列表里. 缺 ...
- css的五种属性值----在路上(21)
在CSS中,每个属性的属性值都有一定的范围,并且不同类型的属性值有不同的值.对于一个属性,必须取得正确的属性值,才能被浏览器正确地解释,因此一定要弄清每种类型的属性值范围.在CSS中属性一般有以下几种 ...
- 设计模式(五): 简单而又不失其重要性的单例模式(Singleton Pattern)
上篇博客我们系统的介绍了三种工厂模式,今天我们就来介绍一下单例模式.单例模式虽然简单,但是还是比较重要的,是常用设计模式之一.在之前的博客<Objective-C中的单例模式>中介绍了Ob ...
- PL/sql使用总结
①右键表拖入到sql窗口中,可自动生成脚本: ②可以和Excel直接复制粘贴: ③F5查看执行计划: ④有环境变量则用环境变量,否则就会去注册表中找对应的值 ⑤oracle客户端设置编码只是为了告诉数 ...