Style flex 属性 详解
css3基础 2023-07-30 02:26:22小码哥的IT人生shichen
Style flex 属性
定义和用法
flex 属性设置或返回项目的长度，相对于同一容器内的其余弹性项目。
flex 属性是 flexGrow、flexShrink 和 flexBasis 属性的简写属性。
注释：如果元素不是弹性项，则 flex 属性无效。
另请参阅：
CSS 参考手册：flex 属性
HTML DOM STYLE 参考手册：flexBasis 属性
HTML DOM STYLE 参考手册：flexDirection 属性
HTML DOM STYLE 参考手册：flexFlow 属性
HTML DOM STYLE 参考手册：flexGrow 属性
HTML DOM STYLE 参考手册：flexShrink 属性
HTML DOM STYLE 参考手册：flexWrap 属性
实例
让所有弹性项的长度相同，而不管其内容如何：
for (i = 0; i < y.length; i++) {
y[i].style.flex = "1";
}完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 220px;
height: 300px;
border: 1px solid black;
display: flex;
}
</style>
</head>
<body>
<p>点击“试一试”按钮可设置 “myDIV” 元素内所有 DIV 元素的 flex 属性：</p>
<button onclick="myFunction()">试一试</button>
<div id="myDIV">
<div style="background-color:coral;">红色</div>
<div style="background-color:lightblue;">蓝色</div>
<div style="background-color:lightgreen;">有更多内容的绿色</div>
</div>
<p><b>注释：</b>IE11 和 Edge 支持 flex 属性。IE 10 支持替代的 msFlex 属性。</p>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("DIV");
var i = 0;
for (i; i < y.length; i++) {
y[i].style.msFlex = "1"; // IE10
y[i].style.flex = "1";
}
}
</script>
</body>
</html>可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
返回 flex 属性：
object.style.flex设置 flex 属性：
object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"属性值
| 值 | 描述 |
|---|---|
| flex-grow | 数字，规定项目相对于其他弹性项目的增长量。 |
| flex-shrink | 数字，规定项目相对于其他弹性项目的缩减量。 |
| flex-basis |
项目的长度。 合法值："auto"、"inherit"，或单位为 "%", "px", "em" 的值，或任何其他长度单位。 |
| auto | 等同于 1 1 auto。 |
| initial | 等同于 0 1 auto。参阅 initial。 |
| none | 等同于 0 0 auto。 |
| inherit | 从其父元素继承此属性。请参阅 inherit。 |
技术细节
| 默认值： | 0 1 auto |
|---|---|
| 返回值： | 字符串，表示元素的 flex 属性。 |
| CSS 版本： | CSS3 |
浏览器支持
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 11.0 | 支持 | 9.0 | 支持 |
