ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS响应式布局

2022-03-25 22:32:04  阅读:164  来源: 互联网

标签:flex 排列 vh 布局 响应 wrap 对齐 CSS


响应式布局就是在任何情况下,页面布局效果都不会发生变化,他会根据用户的电脑屏幕,尺寸大小来改变自身的布局。

浏览器窗口,VH和VW,VH 的计算方法就是,将窗口的大小分为100份,vh 的计算方法和 vh 是一样的,一个是计算高,一个是计算宽。

弹性盒子,弹性盒子是CSS3的一种新布局模式,代替浮动使布局更加简便,对齐方式包含了水平方向和垂直方向,弹性项目可以通过css重新排序。

 display: flex; 代替浮动,flex-direction: column; 元素排列,column:是纵向排列,row:横向排列,也是默认,row-reverse:反向排列,flex:进行空间分配,flex-wrap:自动换行,flex-flow:将 flex-direction 和 flex-wrap 两种结合到一起,flex-start:左对齐,flex-end:右对齐,flex-center:居中对齐,

标签:flex,排列,vh,布局,响应,wrap,对齐,CSS
来源: https://www.cnblogs.com/zzm666/p/16057004.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有