flex布局怎样让网页自适应屏幕大小

 时间:2024-10-12 09:05:08

1、首先是横向的自适应布局。要在外围设置一个容器盒子才行噢。

flex布局怎样让网页自适应屏幕大小

2、然后设置外围为display:flex即可噢。同时给里面的盒子设置flex并且要设置高度噢。

flex布局怎样让网页自适应屏幕大小

3、接着预览便会看到盒子已经把宽度给等比例平分了,这个便是刚才设置flex为1的效果哦。

flex布局怎样让网页自适应屏幕大小

4、当然也可以单独设置某个div的flex为2或者其他数值。

flex布局怎样让网页自适应屏幕大小

5、这样就会变成1+1+2四份宽度了噢。而其中一个div就占了两份宽度。

flex布局怎样让网页自适应屏幕大小

6、当然flex布局默认是横向的布局方式滴。但是可以改成垂直的方式的噢。改成垂直的需要设置外围高度为100vh噢。

flex布局怎样让网页自适应屏幕大小

7、然后便可以看到中间的div高度就会自适应了噢。

flex布局怎样让网页自适应屏幕大小
  • 如何使用CSS3中的box-orient属性设置容器排列
  • 如何在vs中修改QT窗口图标和名称?
  • 在VScode中如何设置水平滚动条自动可见
  • 嘉兴学院南湖学院越秀校区的宿舍怎么样
  • 热门搜索
    三支一扶是什么意思 欧尼是什么意思 什么颜色的钱包聚财 杜仲的功效与作用及食用方法 cosplay的中文意思 违反禁令标志指示是什么意思 新疆雪菊的功效与作用 打卡是什么意思 爱不释手的意思 什么动物吃仙人掌