css弹性布局自动换行怎么实现,网页设计常用布局之CSS弹性布局

#网页设计#在网页设计中内容的排版和布局往往是整个设计工作的重点和难点，如果能熟练掌握CSS弹性布局的话，无论是页面的整体设计还是局部内容的布局，都能起到事半功倍的效果。尤其是对非专业的或刚开始从事前端开发的人，掌握了这种布局方式会让人有一种瞬间顿悟的感觉：网页布局也不过如此嘛。下面让我们一起来看看CSS弹性布局的奇妙之处。

首先在我们在屏幕生成一个宽300px，高200px的DIV作为容器，通过display: flex属性，可将该DIV声明为块级弹性容器

.div1{display:flex;width:300px;heigth:200px;border: 1px solid orange;}

我们可以把这个容器想象成一个箱子，往箱子里面摆放了三个球，下面看看球的几种摆放方式，先定义一个球的样式

.ball {width: 50px;height: 50px;border: 1px solid #2196f3;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 28px;}

将球放进容器里