高级教程-flex

flex原理

• 能够说出flex盒子的布局原理
• 能够使用flex布局的常用属性
• 能够独立完成携程移动端首页案例

1. flex布局体验
2. flex布局原理
3. flex布局父项常见属性
4. flex布局子项常见属性
5. 携程网首页案例制作

1.flex布局体验

布局方便适合移动端

2.flex布局原理

flex弹性布局

3.常见父项属性

flex-direction:设置主轴方向；justify-content:设置主轴上的子元素排列方式重点单行；flex-wrap:设置子元素是否换行

align-content:设置侧轴上的子元素的排列方式多行;align-items设置侧轴上的子元素排列方式；flex-flow:复合属性

4.常见子项属性

flex子项目占的份数；align-self控制子项自己在侧轴的排列方式；order属性定义子项的排列顺序

rem布局

1.rem基础

em是相对于父元素字体大小来说的

rem是一个单位，相对于HTML元素的字体大小，可以通过修改html中的文字大小来修改页面元素的大小，整体控制

2.媒体查询

@media mediatype and|not|only(media feature){css-code}

媒体查询可以根据不同的屏幕尺寸改变不同的样式

3.less基础

为了维护css的弊端-css没有计算能力

4.less变量

语法：@变量名：值；

5.less编译

要将less转换为css文件,下载easy less插件