flex-warp属性值（控制是否换行）
| 值 | 描述 |
|---|---|
| nowrap | 默认值。规定灵活的项目不拆行或不拆列。不换行，则收缩（压缩）显示。 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序 |
html案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
width: 60%;
height: 600px;
border: 2px solid pink;
margin: 100px auto;
display: flex;
justify-content: space-around; /*相当于给每个盒子添加了左右margin外边距*/
/*flex-wrap: nowrap;*/
/*flex-wrap: wrap;*/
/*flex-wrap: wrap-reverse;*/
}
div{
width: 250px;
height: 200px;
}
div:first-child{
background-color: pink;
}
div:nth-child(2){
background-color: purple;
}
div:nth-child(3){
background-color: skyblue;
}
div:nth-child(4){
background-color: hotpink;
}
div:nth-child(5){
background-color: deeppink;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
</body>
</html>
1.案例效果图
pic1.png
2.flex-wrap: nowrap;效果图（默认值，不换行）
pic1.png
3.flex-wrap: wrap;效果图（换行）
pic2.png
4.flex-wrap: wrap-reverse;效果图（翻转）
pic3.png
如有错误或建议欢迎大家指出与评论哈，希望这篇博文能帮助到大家，也可以分享给需要的人。
如需转载，请注明出处。https://www.jianshu.com/p/967e91990615
网友评论