Flexible 弹性盒子模型之flex

实例

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

  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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368238.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java冒泡遍历对象_Java经典排序算法(冒泡、选择、插入)

排序算法说明排序说明对一序列对象根据某个关键字进行排序。术语说明稳定:如果a原本在b前面,而ab,排序之后a仍然在b的前面;不稳定:如果a原本在b的前面,而ab,排序之后a可能会出现在b的后面&#…

create your own github repository and build link to your local project

1. create a repository in you github.  i.e. repository name: spring5_exercise 2. initial git profile in your local project root directory. echo "# spring5_exercise" >> README.md git init git add README.md git commit -m "first commit&…

快速分类–三向和双枢轴

毫无疑问,Quicksort被认为是本世纪最重要的算法之一,并且它是许多语言(包括Java中的Arrays.sort )的事实上的系统排序。 那么,quicksort有何新功能? 嗯,除了我现在(在Java 7发行了2…

mysql workbench启动_怎么启动mysql workbench

答:你好,方法/步骤 如下: 双击或右键打开MySQL Workbench,进入软件主界面。 点击new connection,会有个弹出框,让我们填写user(用户名),password(密码)。 填写完用户名和密码,点击确定就会出现我…

在jekyll模板博客中添加网易云模块

最近使用GitHub Pages Jekyll 搭建了个人博客,作为一名重度音乐患者,博客里面可以不配图,但是不能不配音乐啊。 遂在博客里面引入了网易云模块,这里要感谢网易云的分享机制,对开发者非常友好: 1.每首歌曲…

C# Timer定时器用法

System.Timers.Timer timer1 new System.Timers.Timer(); timer1.Elapsed new System.Timers.ElapsedEventHandler((obj, eventArg) > {Console.WriteLine("aaa"); }); timer1.Interval 2000;//毫秒 1秒1000毫秒 timer1.Enabled true;//必须加上 timer1.AutoR…

线性规划对偶原理

留坑啊留坑。。 白天老师讲的都没听说过 晚上肯定整理不玩啊,,, 转载于:https://www.cnblogs.com/zwfymqz/p/8253842.html

在WebLogic Server上驯服JMX

让我们先假设几件事: 我假设您听说过Java的JMX功能并熟悉它的功能(远程公开和管理您的服务)。 您应该知道默认JVM将具有一个可以注册MBean的Platform MBeanServer实例。 您可以使用JDK中的jconsole命令查看它们。 到目前为止,我…

java 18.9_Oracle: Java 11 (18.9 LTS) 正式上线!

美国时间9月25日,Oracle 官方表示, Java 11 (18.9 LTS) 正式上线!这是自 Java 8 后的第一个长期支持版本。Java 11 版本说明按照 Oracle 公布的支持路线图,Java 11 将会获得 Oracle 提供的长期支持服务,直至2026年9月。为了更快地…

CSS3新特性应用之用户体验

目录 背景与边框第一部分背景与边框第二部分形状视觉效果字体排印用户体验结构与布局过渡与动画源码下载 一、光标 新增加not-allowed光标,不允许访问隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用…

吃饭/训觉-工作室应用隐私政策

吃饭/训觉-工作室尊重并保护所有使用其应用的用户的个人隐私权。为了给您提供更准确、更有个性化的服务,吃饭/训觉-工作室会按照本隐私权政策的规定使用和披露您的个人信息。但吃饭/训觉-工作室将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外&…

day 60 Bootstrip学习

图标地址 http://fontawesome.io/icons/ 图标用法地址 http://fontawesome.io/examples/ 实现代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"I…

监控整页,非AJAX,要求通知

最近&#xff0c;在JSF中开发新图表和图表“导出服务”时&#xff0c;我遇到了一个非常普遍的问题。 当您执行长时间运行的任务&#xff08;操作&#xff09;时&#xff0c;您希望在开始时显示状态“请稍候……”对话框&#xff0c;并在响应到达时最后关闭此对话框。 对于AJAX请…

java图形界面的监听_非专业码农 JAVA学习笔记 用户图形界面设计与实现-所有控件的监听事件...

用户图形界面设计与实现-监听事件System.applet.Applet(一)用户自定义成分1.绘制图形Public voit piant(Ghraphics g){ g.drawLine等图形名称(坐标1234);g.file图形名(坐标123)}2.设置字体-Font类(1)定义font&#xff1a;Font myfontnew Font(“字体”,”样式”,字号);例如&am…

Linux学习笔记006-启动流程

linux 启动流程 centos6 1.post 加电质检-->2.启动bios-->3.加载MBR-->4GRUB引导-->5.加载kernel-->6.设定启动级别-->7.加载rc.sysinit-->8.加载内核模块-->9.启动运行级别程序-->10.读取rc.local-->11.加载/bin/login 1.bios自检 2.读取bios记…

谈谈常用清除浮动的方法

我们在做页面布局的时候&#xff0c;经常需要利用浮动来实现一些布局效果&#xff0c;这样带来的后果就会导致父元素丢失宽度。今天我们就来说说‘找回‘宽度的方法。 而清除浮动后的效果应该是这样的请看&#xff1a; 下面就说说方法&#xff0c;方法其实有非常的多&#xf…

并行运行单元测试

大约是时候单元测试的开发人员能够使用批注在Parallel中运行测试。 在今天的博客文章中&#xff0c;我们将介绍如何使用Easytest提供的注释使传统的Junit测试并行运行。 易测 是在JUnit之上构建的测试框架&#xff0c;可让您轻松编写和维护测试。 它专注于为您的应用程序编写…

java 插件开发 互相依赖_java – Eclipse插件开发:有没有办法控制有关我的插件缺少依赖项的安装程序消息?...

我正在开发一个依赖于Eclipse平台4.2(Juno)的eclipse插件,并且不能安装在旧版本的eclipse上.当用户尝试在旧eclipse上安装我的插件(通过更新站点)时,Eclipse安装程序会阻止他并显示以下消息&#xff1a;Cannot complete the install because one or more required items could …

巧用CSS实现分隔线

下面是几种简单实现分隔线的方法&#xff0c;个人比较喜欢第二种&#xff0c;我也给出了最后第五种比较2的写法&#xff0c;请大家拍砖&#xff0c;或者提供其他好的方法。 单个标签实现分隔线&#xff1a; 点此查看实例展示 .demo_line_01{padding: 0 20px 0;margin: 20px 0;…

ArcGIS API For JS之网络分析(临近设施分析)

ArcGIS 提供两种网络分析&#xff0c;即基于Geometric Network的有向网络或者设施网络和基于Network Dataset的无向网络&#xff0c;在这里网络的分析指后者&#xff0c;ArcGIS api支持网络分析中的最短路径分析、服务区分析、临近设施分析。本文主要讲的是临近设施分析&#x…