弹性布局学习-详解flex-wrap(五)

目录

弹性布局学习-介绍(一) 

弹性布局学习-详解 flex-direction【决定主轴的方向】(二)

弹性布局学习-详解 justify-content(三)

弹性布局学习-详解 align-items(四)

弹性布局学习-详解flex-wrap(五)

flex-wrap

控制是否换行，包括wrap、nowrap

nowrap

  section ul {

            display: flex;

            flex-wrap: nowrap;

            min-height: 600px;

        }

        section li {

            width: 200px;

            height: 200px;

            text-align: center;

            line-height: 200px;

            margin: 10px;

            background-color: pink;

            list-style:none;

        }

wrap

  section ul {

            display: flex;

            flex-wrap: wrap;

            min-height: 600px;

        }

        section li {

            width: 200px;

            height: 200px;

            text-align: center;

            line-height: 200px;

            margin: 10px;

            background-color: pink;

            list-style:none;

        }