# flex与移动web ## 视口 + **视口**：就是浏览器显示页面内容的屏幕区域，视口可以分为**布局视口**，**视觉视口**和**理想视口**。 + 布局视口：layout viewport + 一般移动设备的浏览器都默认设置了布局视口，用于解决早起的pc端页面在手机上显示 ...

网页布局是css的一个重点应用。传统的布局都是依赖display、position、float属性来实现的，但是特殊布局就不易实现，如垂直居中。 01 flex布局是什么？‍ Flex 是 Flexible Box的简写，意为“弹性布局”为盒模型提供最大灵活性。任何一个容器都可以指定为flex ...

　　查遍各大资源无任何flex嵌套布局的例子，经过自己折腾完成了项目中的高度自适应需求（更多应用于前端组件） 效果图： html代码：（关键地方已经用颜色特别标识 ^_^） 总结： 　　flex布局嵌套的关键，就是对item进行容器定位，赋予flex特性 ...

1.两侧固定，中间自适应 .box{ width: 100%; display: flex; height: 300px; } .left ...

flex 布局 input 宽度不自适应 解决方法： 给 input 加上min-height 解决！ ...

头尾固定，中间区域可以滑动效果是移动端最常见的效果，以京东页面为例。以前开发时常用的方法是用固定布局position:fixed;实现，但是该方法在ios上或者其他机型上会出现问题。现在，可以用flex方法快速实现该布局 运行效果： 说明：css样式中，一定要设置 ...

css重构之旅 >前言： 今年我大一,马上就要大二了。从高三毕业暑假到大学的这一年马上过去，马上迎来大二生活.学习前端也有将近一年了。一昧去追求那些视觉的效果和相对高端和新颖的技术，反而忽略了最基础的布局技巧。 回味 2017年3月，百格教育的手机端网站，是我接到的第一个公司外包的项目 ...

效果图 代码实现 ...