实例

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

  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. 弹性盒子模型display:flex

    1.div上下左右居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

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

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

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

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

  4. Flexible 弹性盒子模型之CSS order 属性

    实例 设置弹性盒对象元素的顺序: div#myRedDIV {order:2;} div#myBlueDIV {order:4;} div#myGreenDIV {order:3;} div#myPi ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. BPM Domino集成解决方案

    一.需求分析 Lotus Notes/Domino是IBM的协同办公平台,在国内有广泛的用户. 但由于推出年头较早.采用文档数据库等特点, 导致其流程集成能力弱.统计分析难.不支持移动办公等问题,很多 ...

  2. IT雇员及外包商选择:人品第一

    最近,苹果iOS操作系统和智能手机爆出了一个奇葩故障,在播放特定一段五秒钟的视频时能导致手机死机.唯一的解决办法是按住电源键和Home按键进行手机的重启. 第十八届中国国际高新技术成果交易会在深圳举办 ...

  3. jenkins无法重启tomcat的原因

    在使用Hudson的执行sh脚本的时候,如果sh脚本是一个后台进程,如 Tomcat 这样的服务.如果使用Hudson的默认配置,会发现这些sh 进程有启动的过程,但是不会常驻后台,看Hudson 输 ...

  4. Centos6.5 配置Nginx开机自启动

    1.在/etc/init.d/目录下创建 nginx 文件,内容如下: #!/bin/sh # # nginx - this script starts and stops the nginx dae ...

  5. 【Star CCM+实例】开发一个简单的计算流程.md

    流程开发在CAE过程中处于非常重要的地位. 主要的作用可能包括: 将一些经过验证的模型隐藏在流程中,提高仿真的可靠性 将流程封装成更友好的界面,降低软件的学习周期 流程开发实际上需要做非常多的工作,尤 ...

  6. 免费SSL证书 之Let’s Encrypt申请与部署(Windows Nginx)

    我着着皇帝的新衣,但是你看不见    有一颗愿意等待的心,说明你对未来充满希望.有一颗充满希望的心,那么等待又算什么.人就是在等待与希望中度过,我们永远要对未来充满信心! 读在最前面: 1.本文案例为 ...

  7. Xamarin.Android之SQLiteOpenHelper

    一.前言 在手机中进行网络连接不仅是耗时也是耗电的,而耗电却是致命的.所以我们就需要数据库帮助我们存储离线数据,以便在用户未使用网络的情况下也可以能够使用应用的部分功能,而在需要网络连接的功能上采用提 ...

  8. 为Xamarin更好的开发而改写的库

    欢迎大家加入以下开源社区 Xamarin-Cn:https://github.com/Xamarin-Cn Mvvmcross-Cn:https://github.com/Mvvmcross-Cn  ...

  9. 拥抱.NET Core,如何开发一个跨平台类库 (1)

    在此前的文章中详细介绍了使用.NET Core的基本知识,如果还没有看,可以先去了解“拥抱.NET Core,学习.NET Core的基础知识补遗”,以便接下来的阅读. 在本文将介绍如何配置类库项目支 ...

  10. ABP(现代ASP.NET样板开发框架)系列之13、ABP领域层——数据过滤器(Data filters)

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之13.ABP领域层——数据过滤器(Data filters) ABP是“ASP.NET Boilerplate P ...