flex布局，rem布局，⾃适应布局，响应式布局，Bootstrap 传统布局与flex布局：
传统布局：
1.兼容性好，
2.布局繁琐，
3.局限性，不能再移动端很好的布局
flex弹性布局
1.操作⽅便，布局极为简单，移动端应⽤很⼴泛，
2.PC端浏览器⽀持情况较差
3.ie11或更低版本，不⽀持或仅部分⽀持
注意：当我们为⽗盒⼦设为flex布局以后，⼦元素的float，clear和vertical-align属性将失效
建议：
1.如果是PC端页⾯布局，我们还是传统布局
2.如果是移动端或者不考虑兼容性问题的PC端页⾯布局，我们还是使⽤flex弹性布局
⽗属性
1.align-content设置侧轴上的⼦元素的排列⽅式（多⾏）：
flex-start：默认值在侧轴的头部开始排列
flex-end：在侧轴的尾部开始排列
center：在侧轴中间显⽰
space-around：⼦项在侧轴平分剩余空间
space-between：⼦项在侧轴先分布在两头，再平分剩余空间
strech：设置⼦项元素⾼度平分⽗元素⾼度
2.align-items设置侧轴上的⼦元素排列⽅式：（这个针对的是单⾏）
flex-start：默认值从上到下
flex-end：从下到上
center：挤在⼀起居中（垂直居中）
stretch：拉伸
3. flex-direciton：
这是规定沿着x轴⽅向排列：
row：默认值从左到右
row-reverse：从右到左（简单了解我们的翻转）
这是规定沿着y轴⽅向排列：
olumn：从上到下
column-reverse：从下到上
4.# flex-flow：
flex-flow属性是flex-direction和flex-wrap属性的复合属性`
flex-flow：row    wrap；
5.# flex-wrap设置⼦元素是否换⾏：
原因：flex布局中，默认的⼦元素是不换⾏的，如果装不开，会缩⼩⼦元素的宽度，放到⽗元素⾥⾯nowrap：默认不换⾏
wrap：换⾏
6.# justify-content设置主轴上的⼦元素排列⽅式：
使⽤属性之前⼀定要确定好主轴是哪个
flex-start：默认值从头部开始，如果主轴是x轴，则从左到右
flex-end：从尾部开始排列
center：让⼦元素居中对齐
css布局左边固定右边自适应
space-around：让⼦元素平分空间
space-between：先让盒⼦两边贴边，然后让其他的盒⼦平分剩余的空间
⼦属性
flex属性：定义⼦项⽬分配剩余空间，⽤flex来表⽰占多好份数
rem的使⽤⽅法：r是root单词的缩写
指相对于根元素的字体⼤⼩的单位，不管是web端还是移动端⽤法都是⼀样的（1）HTML标签
<div>123</div>
（2）CSS样式
html {
font-size: 16px;
}
div {
font-size: 1rem;
width: 20rem;
height: 20rem;
background-color: red;
}
举例：
（1）HTML标签
<div>123</div>
（2）CSS样式
<style>
html {
font-size: 16px;
}
div {
font-size: 1rem;
width: 20rem;
height: 20rem;
background-color: red;
}
</style>
（3）JS⽂件
<script>
var c = ()=> {
//获得屏幕的宽度
let w = document.documentElement.clientWidth;
//此处的20是随机的，⾃⼰来定
//iphone5的宽度就是320px
let n = (20*(w/320)>40?40+"px":20*(w/320)+"px");
document.documentElement.style.fontSize=n;
}
//load是页⾯加载事件
window.addEventListener("load",c)
/
/resize是电脑屏幕尺⼨发⽣变化
window.addEventListener("resize",c)
</script>
移动端 REM 适配
Vant 中的样式默认使⽤ px 作为单位，如果需要使⽤ rem 单位，推荐使⽤以下两个⼯具：是⼀款 postcss 插件，⽤于将 px 单位转化为 rem
⽤于设置 rem 基准值
下⾯我们分别将这两个⼯具配置到项⽬中完成 REM 适配。
（1）使⽤ 动态设置REM 基准值（html 标签的字体⼤⼩）
安装依赖：
# yarn add amfe-flexible
npm i amfe-flexible
然后在 main.js 中加载执⾏该模块：
import 'amfe-flexible'
最后测试：在浏览器中切换不同的⼿机设备尺⼨，观察 html 标签 font-size 的变化。
例如在 iPhone 6/7/8 设备下，html 标签字体⼤⼩为 37.5 px
例如在 iPhone 6/7/8 Plus 设备下，html 标签字体⼤⼩为 41.4 px
（2）使⽤ 将 px 转为 rem
安装依赖：
# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的简写
npm install postcss-pxtorem -D
然后在项⽬根⽬录中创建 fig.js ⽂件：
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
配置完毕，重新启动服务。
最后测试：刷新页⾯，审查元素样式查看是否已将 px 转换为 rem。
这是没有配置转换之前的。
这是转换之后的，可以看到 px 都被转换为了 rem。
需要注意的是：
该插件不能转换⾏内样式中的px，例如<div ></div>
// plugins配置要使⽤的相关插件
// 'autoprefixer'⾃动添加浏览器⼚商声明前缀，⽤来兼容不同的浏览器// vuecli已经在内部配置了'autoprefixer'，
// plugins: {
// 'postcs-pxtorem'将px转为rem
'postcss-pxtorem':{
// rootValue转换的跟元素基准值
// 正常情况下按照你的设计稿来
// 如果750宽的设计稿，那么你写750/10
// 那么我们就可以在设计稿中测量多少写多少
// 如果375宽的设计稿，那么你写375/10
// vant组件库基于375宽写的
// 移动端页⾯都是以iphone6/7/8为原型设计的
// 写成37.5的话那么就需要将你测量的数据除以2
rootValue:37.5,
// propList：需要转换的css属性
/
/ *就是所有属性都要转换
propList:['*']
}
}
⾃适应布局代码：
（1）左侧固定，右侧⾃适应

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。