Flexible 弹性盒子模型之flex
实例
让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容:
- #main div
- {
- flex:1;
- }
效果预览
浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
紧跟在 -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相关推荐
- CSS之弹性盒子模型(Flex布局)
文章目录 一.Flex布局是什么? 二.基本概念 三.容器的属性 3.1 flex-direction属性 3.2 justify-content属性 3.3 flex-wrap属性 3.4 alig ...
- Flexible 弹性盒子模型之CSS justify-content 属性
实例 在弹性盒对象的 <div> 元素中的各项周围留有空白: div { display: flex; justify-content: space-around; } 复制 效果预览 浏 ...
- Flexible 弹性盒子模型之CSS align-self 属性
实例 居中对齐弹性对象元素内的某个项: #myBlueDiv { align-self:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -w ...
- Flexible 弹性盒子模型之CSS align-items 属性
实例 居中对齐弹性盒的各项 <div> 元素: div { display: flex; align-items:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性 ...
- Flexible 弹性盒子模型之CSS flex-shrink 属性
实例 让第二个元素收缩到其他元素的三分之一: 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 - ...
- 弹性盒子模型属性之flex-grow
在学习弹性盒子模型的时候,有几个属性常常让同学们感觉头痛, 不知到最后得到的效果数值到底是怎样计算得来的,那么不要慌,稳住,我们能赢 !!! 今天就让我们先来看看flex-grow这个属性 flex- ...
- flex弹性布局之弹性盒子模型
一,flex弹性盒子布局 1. flex弹性盒子介绍 弹性盒子是 CSS3 的一种新的布局模式.CSS3 弹性盒( Flexible Box 或 flexbox,是一种当页面需要适应不同的屏幕大小以及 ...
- flex弹性盒子模型
目录 1.弹性盒子模型可以以任意父容器为flex模型 2.他的布局位置可以在父容器中或在自身属性中 3.flex布局的优点 1.弹性盒子模型可以以任意父容器为flex模型 2.他的布局位置可以在父容器 ...
- 弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
文字长度过长显示省略号的样式设置方法众所周知: <!-- 单行显示省略号 --> .css {white-space: nowrap;overflow: hidden;text-overf ...
最新文章
- Log4j使用技巧——让子类使用父类中定义的Logger
- linux 脚本 if else,基于shell的if和else详解
- 漫游Kafka设计篇之性能优化
- ZDB5202烧成控制器方法
- 来了!云栖大会都能看到什么?
- cad应用程序的组件中发生了未经处理的异常_什么是CAD/CAM?
- sql怎么撤回update_零基础快速自学SQL,2天足矣!
- Struts2 多方法的Action
- 用VS2015编译pjsip的工程pjproject-vs14
- Svn插件提交比较慢的解决方法
- 中科大EPC课程爬取-带步骤
- [宋史学习] 赵光义篡改历史
- asp.net实现动态显示当前日期时间
- 打开Charles浏览器无法上网
- LazyAn-cocos插件开发实战
- 微信小程序--石头剪刀布(小游戏)
- android的平台签名工具,《安卓开发》APK签名工具使用方法
- SAP中总账科目行项目不显示的处理方法
- luoguP1196 银河英雄传说(并查集)
- HTML 的静态网页分页样式
热门文章
- 计算机减法英语,英语加减乘除的表达
- java显示数据库 控件_WebLogic运用DB的Java控件访问数据库(1)
- Objective-C 反射机制
- 7.25第一次组队赛
- 浅析路径遍历漏洞 文/饭
- c++ 返回 char*
- mysql 半同步关闭_MySQL的半同步模式配置
- 计算机科学基础知识(四): 动态库和位置无关代码
- ai电磁组属于什么组_RPA+AI 创新案例挑战赛 2020 【专业组】amp;【校园组】优胜名单来也!...
- 自动驾驶中激光雷达如何检测障碍物?