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

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

css弹性布局自动换行怎么实现,网页设计常用布局之CSS弹性布局_第1张图片

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

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

css弹性布局自动换行怎么实现,网页设计常用布局之CSS弹性布局_第2张图片

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

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

将球放进容器里

你可能感兴趣的:(css弹性布局自动换行怎么实现)