Style flexFlow 属性 详解
css3基础 2023-07-30 02:29:53小码哥的IT人生shichen
Style flexFlow 属性
定义和用法
flexFlow 属性是 flexDirection 和 flexWrap 属性的简写属性。
flexDirection 属性规定弹性项的方向。
flexWrap 属性规定弹性项目是否应该换行。
注释：如果元素不是弹性项，则 flexFlow 属性无效。
另请参阅：
CSS 参考手册：flex-flow 属性
实例
使弹性项按列显示，并且不换行：
document.getElementById("main").style.flexFlow = "column nowrap";
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 200px;
height: 150px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
}
#main div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
<p>请点击“试一试”按钮，将 flexFlow 属性的值设置为 “column nowrap”。</p>
<button onclick="myFunction()">试一试</button>
<p><b>注释：</b>Internet Explorer 10 及更早版本不支持 flexFlow 属性。</p>
<script>
function myFunction() {
document.getElementById("main").style.flexFlow = "column nowrap";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
返回 flexFlow 属性：
object.style.flexFlow
设置 flexFlow 属性：
object.style.flexFlow = "flex-direction flex-wrap|initial|inherit"
属性值
| 值 | 描述 |
|---|---|
| flex-direction |
可能的值： 默认值是 "row"。 规定弹性项目的方向。
|
| flex-wrap |
可能的值： 默认值是 "nowrap"。 规定弹性项目是否应该换行。
|
| initial | 将此属性设置为其默认值。请参阅 initial。 |
| inherit | 从其父元素继承此属性。请参阅 inherit。 |
技术细节
| 默认值： | row nowrap |
|---|---|
| 返回值： | 字符串，表示元素的 flex-flow 属性。 |
| CSS 版本： | CSS3 |
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 11.0 | 支持 | 9.0 | 支持 |
相关页面
HTML DOM STYLE 参考手册：flex 属性
HTML DOM STYLE 参考手册：flexBasis 属性
HTML DOM STYLE 参考手册：flexDirection 属性
HTML DOM STYLE 参考手册：flexGrow 属性
HTML DOM STYLE 参考手册：flexShrink 属性
HTML DOM STYLE 参考手册：flexWrap 属性
