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

CSS flex-direction

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

关于弹性布局的概括性介绍可以参阅display:flex 弹性布局一章节。

虽然有对flex-direction属性的介绍,但非常简单,本文再通过代码实例对其进行详细介绍。

本站总是强调对于属性的理解,可以从其名称入手,flex-direction解析如下:

(1).flex:表示此属性专属于弹性布局,在非弹性布局中没有任何效果。

(2).direction:翻译成汉语具有"方向"的意思。

由此可以猜测,此属性用于弹性布局与方向相关的设置,事实也是如此。

弹性布局容器具有主轴和交叉轴两根轴线,默认状态下,主轴是水平的,方向是从左到右。

flex-direction属于用于设置弹性布局容器主轴的方向,实质也就是设置项目在主轴的排列方向。

语法结构:

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

属性值说明:

(1).row:默认值,主轴是水平的,起始位置在左侧,项目从左到右排列。

(2).row-reverse:主轴是水平的,起始位置在右侧,项目从右到左排列。

(3).column:主轴是垂直的,起始位置在顶端,项目垂直显示,从上到下。

(4).column-reverse:主轴是垂直的,起始位置在底部,项目垂直显示,从下到上。

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

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

简单图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/110718cthlrl9hzuwqw6n3.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

浏览器支持性:

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

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

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

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

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

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 400px;
  display:flex;
  flex-direction:row;
  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/110840s7draddx222j7eza.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

默认状态下,主轴是水平的,且左侧为起始位置。

那么容器的项目排列方向就是从左至右,上述代码演示的很清楚。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 400px;
  display:flex;
  flex-direction: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/110904ez268gh72hnuttns.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码通过将flex-direction属性值设置为row-reverse,那么容器的主轴虽然还是水平,但是起始位置变为右侧,所以项目是从右到左排列,与默认状态方向颠倒。

[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-direction:column;
  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/110942iom3o1fxoyfhsfbs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过flex-direction:column将容器主轴设置为垂直方向,默认是水平的。

主轴的起始位置在顶端,所以项目是从上至下排列。

本属性较为简单,其他属性值不再一一举例演示,感兴趣的可以自行测试。

如果对于本文章有任何疑问或者建议,可以在文章底部留言,本站会第一时间回复。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS flex-grow 属性下一篇:CSS flex-wrap

最新评论

返回顶部