用Flex轻松布局

开发工具与关键技术:DW/浏览器;前端技术
作者:黄启浩
撰写时间:2019.02.15

小白们遇到以下情况,想要把4个盒子并排显示,是不是又要用浮动了?

用Flex轻松布局_第1张图片

各位小白先停下来,不要急!先看样式:

用Flex轻松布局_第2张图片

这里4个盒子是各占一行的,大家看好了

用Flex轻松布局_第3张图片

用Flex轻松布局_第4张图片

现在不用浮动,直接flex成并排显示,justify-content: flex-start就是这4个盒子按照主轴的方向(默认主轴的方向就是水平方向)从头到尾顺序排列(左对齐)。

用Flex轻松布局_第5张图片

是不是get到了什么呢?赶紧动手试试把!

 

 

 

 

 

感谢大家的浏览,如有疑问可在评论留言哦

 

 

 

 

 

 

 

 

你可能感兴趣的:(专题技术文献)