您的位置:首页> 前端教程> CSS3教程
文章导航

CSS flex-flow

2019-4-11 14:18| 作者: admin| 查看: 608| 评论: 0|来自: 蚂蚁部落

CSS 弹性布局总体介绍可以参阅display:flex 弹性布局一章节。

本文专注于介绍弹性布局众多属性之一的flex-flow属性。

此属性非常简单,因为它是弹性布局的中flex-direction和flex-wrap属性的合体。

也就是说flex-flow是上述两个属性的简写形式,其实就是一个复合属性,类似于background等属性。

所以掌握此属性的关键在于掌握flex-direction和flex-wrap属性的用法,关于前面三个属性可以参阅下几篇文章:

(1).flex-direction参阅CSS flex-direction一章节。

(2).flex-wrap参阅CSS flex-wrap一章节。

(3).background参阅CSS background一章节。

此属性用于容器元素,如果非弹性布局,则设置此属性没有任何效果。

语法结构:

[CSS] 纯文本查看 复制代码
flex-flow: flex-direction flex-wrap|initial|inherit;

属性值说明:

(1).flex-direction:表示此位置是flex-direction属性值。

(2).flex-wrap:表示此位置是flex-wrap属性值。

(3).initial:项目默认方式显示,可以参阅CSS initial 属性一章节。

(4).inherit:从父元素继承该属性。

特别说明:属性值的顺序并不会影响结果,文章的底部会进行简单代码演示。

浏览器兼容:

(1).IE10+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).火狐浏览器支持此属性。

(4).谷歌浏览器支持此属性。

(5).Opera浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 200px;
  display:flex;
  flex-flow:row-reverse wrap;
  background:#ccc;
}
#main div {
  width: 50px;
  height: 50px;
  text-align:center;
  line-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>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/142123yd148xfxbu7uy1fe.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).外层div元素采用弹性布局,为其应用flex-flow:row-reverse wrap。

(2).row-reverse表示主轴是水平的,但是其实端在右侧,wrap表示根据需要自动换行。

非常简单的一个属性,此时可能不少朋友会关心属性值的顺序会不会对结果产生影响。

很简单,只要通过一个简单代码实例就可以得出结论,将上述代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 200px;
  display:flex;
  flex-flow:wrap row-reverse;
  background:#ccc;
}
#main div {
  width: 50px;
  height: 50px;
  text-align:center;
  line-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>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/142202tk5em6mtd4egw2kk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述代码分析如下:

(1).此代码与上一个代码几乎完全一样,唯一的区别在于flex-flow属性值位置坐了调整。

(2).可以看到,表现结果没有任何区别,也就是说属性值的顺序并不会对结果造成影响。

此属性非常的简单,不再进行过多的介绍,如果对本文有任何意见或者疑问可以在文章底部留言。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS flex-wrap下一篇:CSS justify-content

最新评论

返回顶部