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

2019-11-23 本文已影响0人 Kkite

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>