flex弹性布局实现多个div并排

多个div并排,在需求中很常见,简单的方法就是给每个子div定义宽度来平分父div的宽度,很显然,这个宽度的固定的,在不同的浏览器中切换很容易就出现样式的变形,造成很差的用户体验,所以才有了弹性布局。

弹性布局可以实现不用固定子div的宽度实现多个并排的效果。

定义多个div容器


  
请输入
请输入
请输入
请输入
请输入
请输入
请输入
请输入
请输入

定义flex局部的样式

  

效果如下:

PC端

flex弹性布局实现多个div并排_第1张图片

手机端:

flex弹性布局实现多个div并排_第2张图片 

 

你可能感兴趣的:(flexbox,html5,css)