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

CSS flex-wrap

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

flex-wrap属性是众多的弹性布局属性之一,本文将结合代码实例对其进行详细介绍。

关于弹性布局的基本用法本文不做介绍,具体参阅display:flex 弹性布局一章节。

对于此属性的介绍,依然坚持本站的风格,从名称入手,flex-wrap解析如下:

(1).flex:说明此属性是专用于弹性布局,对于非弹性布局此属性无效。

(2).wrap:这个单词就更熟悉了,CSS中大量属性中都包含此单词,无一例外都是与换行相关,比如overflow-wrap属性,flex-wrap属性也不例外。

此属性应用于容器元素,从上述名称分析来看,它可能用于设置于项目是否换行有关。

事实也是如此,flex-wrap属性规定项目是否拆行或拆列。

语法结构:

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

属性值说明:

(1).nowrap:默认值,规定容器中的项目不会拆行或者拆列显示。

(2).wrap:规定容器中的项目在需要的时候自动进行拆行或者拆列显示。

(3).wrap-reverse:规定容器中的项目在需要的时候自动进行拆行或者拆列显示,但顺序相反。

(4).initial:规定容器中的项目一默认方式显示,可以参阅CSS initial 属性一章节。

(5).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;
  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/123310v8s3l87f0zzcn3vj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对上述代码的表现解析如下:

(1).外层div元素采用display:flex,那么它成为一个弹性布局容器,宽度为200像素。

(2).容器具有六个项目,每个项目的宽度是50像素,所以项目总宽度是300像素。

(3).很明显项目的总宽度超过容器的宽度,如果是普通布局,很明显内部子元素会产生换行。

(4).但是弹性布局非常的灵活,既然是弹性布局,那么就可以能伸能缩。

(5).默认状态下,项目不会自动换行,而是自动收缩以适应容器。

[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-wrap: wrap;
  background:#ccc;
}
#main div {
  width: 50px;
  height: 50px;
  text-align:center;
}
</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/123335l85k8pz89q5k0p81.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码解析如下:

(1).外层div元素采用display:flex,那么它成为一个弹性布局容器,宽度为200像素。

(2).容器具有六个项目,每个项目的宽度是50像素,所以项目总宽度是300像素。

(3).容器元素采用flex-wrap: wrap,那么容器的项目如果宽度过长,那么就会自动换行。

(4).代码的表现也体现了上述结论,非常简单。

[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-wrap:wrap-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/123358r0gk66pgia66niwn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码表现解析如下:

(1).值简单调整了一下属性值,布局发生如此奇妙的变化,从一个侧面也体现了弹性布局的强大。

(2).将容器flex-wrap属性值设置为wrap-reverse,那么项目在需要的时候可以换行,但顺序上下颠倒,可以看到原本在第一行的项目,现在出现的在第二行,不要认为项目的排列前后顺序颠倒,只是行的位置发生了颠倒。

总体来讲,此属性比较简单,如果对本文有任何问题或者疑问可以在文章底部留言。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS flex-direction下一篇:CSS flex-flow

最新评论

返回顶部