rem是一个相对于根元素字体大小的单位.
html{
font-size: 12px;//根元素字体大小为12px
}
p{
font-size: 2rem;//p元素的字体大小为24px
}
结合fiexble.js实现文字适配
怎么设置flex布局:
Flex翻译为“弹性”,通过给元素设置display属性,属性值为flex或者inline-flex。使其变成弹性容器,容器中的直系子元素就会变为弹性元素。
div{
display: flex;//变成弹性盒
}
弹性盒子可以直接控制子元素的位置
Flex盒子分成主轴和侧轴
布局父项常见属性:
flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)
flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
flex子项目占的份数
align-self控制子项自己在侧轴的排列方式
order属性定义子项的排序顺序(前后顺序)