CSS流动布局-页面自适应 项目中经常会碰到页面自适应的问题,例如:商城的列表展示、分类列表展示等页面,如下: 该页面会随着页面的放大缩小而随之发生变化,解决方法:display: flex;配合子元素的动态宽度来实现,子元素的宽度 = (总宽 - 自身的margin) / 每行的数量即可。 .box{border:1pxsolid red;width:80%;disp...
主内容栏宽度自适应 第1个侧边栏宽度固定 第2个侧边栏宽度固定 ``` ### CSS清单 ``` .layout { display: flex; } .layout__main { flex: 1; } .layout__aside { width: 200px; } ``` ### f.table布局 ``` <!-- 表格布局 --> .layout.table .left-center-right{ width:100%; hei...
body{margin: 0;} .m-wrap{display: flex;} .m-item{position: relative; flex: 1;padding: 25% 0 0 0;} .m-item-inner{position: absolute;top: 0;left: 0;right: 0;bottom: 0; border: 1px solid #ddd;display: flex;justify-content: center;align-items: center;font-size: 30px;font-we...
和flex中的flex:1比较类似的是,grid中也有一个单位也能做到均等分布的效果,那就是1fr。 复制 div{ display: grid; grid-template-columns: 1fr auto 1fr; } 1. 2. 3. 4. 这样3个子容器,中间是自适应宽度,左右是自动等分的。 图片 原理和前面相同,这里就不重复了,关键实现如下: 复制 appbar{ display...
flex/inlineflex 伸缩盒模型(快速布局利器) 该元素即成为伸缩容器(flex container) 伸缩容器的子元素自动升级为伸缩项目(flex item) display = flex; 特点: 伸缩项目默认在一行排列。 子元素自动升级为块元素。 所有伸缩项目默认在主轴的 start 处排列。
使用Grid网格布局实现两栏布局的要点在于列数为2,且首列的宽度根据需要自行设置,第二列使用片段"fr"属性进行自适应即可。 行数不需要指定,每行会根据内容高度进行自适应缩放。 现在给类名为"container"的盒子添加"display: grid"属性,使该盒子成为容器。
1.给容器一个固定宽度,但这也降低了组件的通用性。 2.让容器display: inline-flex,让宽度根据数字大小自适应,这样做也有一个缺点,在容器宽度发生变化的时候,会发生闪烁。 所以究竟使用哪种解决方案还是根据大家的项目业务自己决定吧!
项目中经常会碰到页面自适应的问题,例如:商城的列表展示、分类列表展示等页面,如下: 该页面会随着页面的放大缩小而随之发生变化,解决方法:display: flex;配合子元素的动态宽度来实现,子元素的宽度 = (总宽 - 自身的margin) / 每行的数量即可。 .box{border:1pxsolid red;width:80%;display: flex;direction: lt...
flex弹性布局案例(项目)之flex自适应浏览器缩放布局 核心知识点: flex弹性布局 display:flex; flex-direction flex-wrap justify-content align-items position定位 ::after伪元素 背景线性渐变background-image:linear-gradient() 01:构建水平弹性伸缩的框架结构 效果如下: 代码如下: body{ margin:0; } .container...
display: flex; min-height: 100px; } .left { flex-basis: 200px; background: green; } .main { flex: auto; background: blue; } .right { flex-basis: 200px; background: red; } flex布局,弹性布局,可以简便、完整、响应式地实现各种页面布局,未来的布局的首选方案(当然如果你要考虑ie,另说) ...