Flex布局，移动端适配，响应式布局

Flex布局
🌟flex特点：
移动端或是不考虑兼容的PC端采用flex布局，PC端不使用
任何一个标签都可以指定使用flex布局
父标签设为flex布局后，自元素的float,clear和vertical-align属性将失效
使用行和列的思路来控制布局：主轴main
🌟flex使用
1.flex入口，加在容器上
display:flex;

2.水平 两端对齐 居中
justify-content: space-between;

3.单行垂直居中
align-items: center;

✨flex-direction: row;默认元素排列方式从左到右排列：
更改元素排列方式，从右到左排列：
flex-direction: row-reverse;
更改元素排列方式，从上到下排列：
flex-direction: column;
更改元素排列方式，从下到上排列：
flex-direction: column-reverse;

✨justify-content: flex-start; 控制元素在左右的对齐方式
justify-content: flex-start;// 头部对齐
justify-content: flex-end;//尾部对齐
justify-content: center; //居中对齐
justify-content: space-around; //平分剩余空间
justify-content: space-between;//先两边对齐，再平分剩余空间

✨flex-wrap:控制自元素是否换行
/* 默认值 不换行;子项目加起来的宽度超过父级的宽度时，子项宽度会被缩小，宽度只是不生效，必须设置 */
flex-wrap: nowrap;

/* 换行; 子项的总宽加起来超过父级宽度，就会换行*/
flex-wrap:wrap;

✨align-items 控制单行上下的对齐方式
默认值为整行从上到下对齐：
align-items: flex-start;
从下到上对齐：
align-items:flex-end;
居中：
align-items: center;
拉伸：
align-items: stretch;
⚠️stretch 如果项目未设置高度或设为auto,将占满整个容器高度

✨align-content: 控制多行上下对齐方式
align-content: flex-start; //多行从上到下对齐；
align-content: flex-end; //多行从下到上对齐
align-content: center; //多行中间对齐
align-content: space-around; //多行平均分对齐
align-content: space-between; //多行先上下两边对齐，再平分剩余空间对齐
align-content: stretch; 拉伸

✨flex ：子元素占有（划分）在主轴上的剩余空间，分10份
.item {
//百分比或者是1-10的数字
flex: 20% 或者 2；
}

✨align-self: 控制子项自己的对齐方式
语法：父级如果设置了align-items：的值，子项没有align-self:这一项的话，会继承父类的对齐方式
align-self：flex-start 默认值，从上到下
align-self：flex-end: 从下到上
align-self：center; 挤在一起居中（垂直居中）
align-self: stretch； 拉伸
⚠️：align-self：默认值为auto,表示继承父元素align-items 属性
但如果父级没有设置align-items, align-self 的默认值为 auto 就为stretch;

——————————————————————————————————————————————————
移动端适配

🌟媒体查询：把屏幕划分不同档位，等待变化

@media screen and (min-width:499px) and (max-width:639){
	body{
		background-color: red;
        }
}

🌟rem 单位：root: 1rem = HTML的font-size大小

/* 1.根html 为 10px */ html { 
   font-size: 10px;
}
/* 2.此时 div 的宽就是 150px */ div { 
    width: 15rem;
}

🌟rem 布局：rem + 媒体查询

✨rem布局的核心:rem+媒体查询; 媒体查询:把屏幕划分不同档位，等待变化;
布局所有单位用rem，当 HTML字体大小发生改变，使用rem单位元素都会发生改变;
rem+媒体查询加在一起:划分屏幕，等待变化;变化谁?变化唯一控制 rem(HTML字体大小)
🌟less 的使用语法：
✨命名规则:
必须有@为前缀
不能包含特殊字符~=+、不能以数字开头
大小写敏感区分;

//@变量名:值; @bg:#333; .box_1 { 
  background-color: @bg;
}
.box_2 {
  background-color: @bg;
} 

✨嵌套：
类似写HTML一样写less

/* css 写法 */ 
#header .logo {
 width: 300px; 
} 
/* less 写法 */
 #header { 
  .logo {
      width: 300px;
}  

交集|伪类|伪元素选择器语法：

/* css写法 /
a:hover{
color:red; }
/ less写法 */
a{
&:hover{
color:red;
} }
🌟两种解决方案对比
1.rem + 媒体查询 + less 方案
750px 操作过程:
第一步:
原稿实现:先拿到设计稿:750px ; 页面上所有的元素，在750px设计稿上进行测量，代码实现;
第二步:
准备各个档位下的rem :提前准备好各个档位下的HTML 的font-size大小;
拿到当前尺寸的rem:因为我现在是750px的设计稿，所以可以得到750px这个尺寸属于的档位下的 HTML 的font-size大小，也就是750px设计稿下的1rem值。
计算比例:把页面刚才所有的元素的PX值替换为 rem
达到目标:那么，屏变化时，1rem(基础块)也会变化，自然就是等比缩放;
2.rem + flexible.js + less：
划分10份
设置在HTML标签上

function setRem () {
// docEl.clientWidth JS获取当前屏幕的宽度 // 除以10,得到基础块
var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + 'px' 
} 

步骤!!!
假如设计稿430px
拿到UI设计稿，原稿实现;页面上所有的元素，在设计稿上进行测量，代码实现;(流式、flex)只要是UI给 图上有标注，就是写出来;先全部实现出来，一会统一替换;
1）在哪里写?less文件
2）需要把生成的css文件进行引入index.html;
设计稿宽度/10 :1rem=43px;
统一替换:100px=100/43rem;
方案对比
相同:都是对font-size实现控制，1rem(基础块)变化，实现等比效果; 不同:
rem+媒体查询+less:通过设置不同的档位下，设置不同的1rem值;效果为阶梯式变化; flexible.js+rem:通过js设置不同的1rem值，效果为连续变化;这个看起来更为连贯，适配任何屏幕。

——————————————————————————————————————————————————
响应式布局
🌟档位划分
🌟媒体查询:档位划分;市场上默认的划分;三个节点、四个档位
语法:把市场上所有屏幕包括在内;

/* 1. 超小屏幕下 xs 小于 768 /
@media screen and (min-width: 0px) {
}
/ 2. 小屏幕下 sm 大于等于768 /
@media screen and (min-width: 768px) { }
/ 3. 中等屏幕下 md 大于等于 992px /
@media screen and (min-width: 992px) { }
/ 4. 大屏幕下 lg 大于等于1200 */
@media screen and (min-width: 1200px) { }
✨版心：
注意:
媒体查询使用符号的相关:min-，max-包含等号，后面是数值单位为px;
除超小屏以外:版心的宽度设置都是小于当前档位最小界值，比如 min-width: 768px，版心是750px; 原因:两边留空白，用户体验好。
以上市场默认划分，可根据自己需求添加档位;

🌟Bootstrap 栅格系统