“Css3 pr flex”的版本间差异
本页内容
无编辑摘要 |
|||
(未显示同一用户的1个中间版本) | |||
第1行: | 第1行: | ||
{{DISPLAYTITLE:flex}}[[Category: | {{DISPLAYTITLE:flex}}[[Category:css reference|101]] | ||
= CSS flex 属性 = | = CSS flex 属性 = | ||
第6行: | 第6行: | ||
让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容: | 让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容: | ||
<sample title="" desc="" lang="html" | <sample title="" desc="" lang="html" hererun="1"> | ||
#main div | #main div | ||
{ | { | ||
第12行: | 第12行: | ||
} | } | ||
</sample> | </sample> | ||
<run name=" | <run name=""> <!DOCTYPE html> | ||
<html> | <html> | ||
<head> | <head> | ||
第54行: | 第54行: | ||
{| class="table table-striped table-hover" | {| class="table table-striped table-hover" | ||
! 属性 | ! 属性 | ||
! | ! Chrome | ||
! | ! Internet Explorer / Edge | ||
! | ! Firefox | ||
! | ! Safari | ||
! | ! Opera | ||
|- | |- | ||
| flex | | flex |
2022年8月19日 (五) 04:45的最新版本
CSS flex 属性
让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容:
示例
#main div
{
flex:1;
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。
属性 | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
flex | 29.021.0 -webkit- | 11.010.0 -ms- | 28.018.0 -moz- | 9.06.1 -webkit- | 17.0 |
定义和用法
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
注意:如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。
默认值: | 0 1 auto |
继承: | 否 |
可动画化: | 是,参见个别的属性。请参阅 可动画化(animatable)。 |
版本: | 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。 |
相关文章
CSS 参考手册:flex-basis 属性
CSS 参考手册:flex-direction 属性
CSS 参考手册:flex-flow 属性
CSS 参考手册:flex-grow 属性
CSS 参考手册:flex-shrink 属性
CSS 参考手册:flex-wrap 属性