CSS flex-warp控制是否换行属性

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