弹性布局学习-详解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;
}