flex布局可以让网页更好地去适配移动端的设备，从而可以达到比较优良的视觉效果哦。今天小编我便来分享一下flex布局让网页自适应的经验方法噢。
工具/原料
电脑
浏览器Hbuilder
方法/步骤
1、首先是横向的自适应布局。要在外围设置一个容器盒子才行噢。
2、然后设置外围为display:flex即可噢。同时给里面的盒子设置flex并且要设置高度噢。
3、接着预览便会看到盒子已经把宽度给等比例平分了，这个便是刚才设置flex为1的效果哦。
4、当然也可以单独设置某个div的flex为2或者其他数值。
5、这样就会变成1+1+2四份宽度了噢。而其中一个div就占了两份宽度。
6、当然flex布局默认是横向的布局方式滴。但是可以改成垂直的方式的噢。改成垂直的需要设置外围高度为100vh噢。
7、然后便可以看到中间的div高度就会自适应了噢。
