flex布局
屏幕
屏幕尺寸
指的是屏幕对角线的长度，一般用英寸来度量
分辨率
设备分辨率
是生产屏幕时就固定的，它是不可被改变的
逻辑分辨率
由软件驱动决定
视口
布局视口
理想视口
使用meta标签设置视口宽度，制作适配不同设备宽度的网页
视口:name="viewport" 屏幕宽度:content="width=device-width 缩放:initial-scale=1.0(没有缩放) 最大缩放程度:maximum-scale=1.0 最小缩放程度 :minimum-scale=1.0 允许用户双击放大缩小:user-scalable=no
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
flex布局（弹性布局）
语法：display：flex
<style>
div{
display: flex;
}
</style>
特点： 父盒子项设置，盒子里的元素称为子项，会发生具体变化 1.不再区分什么块级，行内块和行内，全部可以设置宽高 2.子项默认的宽度由内容撑开，高度与父项相同 3.子项:（使用浮动没有效果）使用定位、margin、transform都有效 4.默认情况下，子项的总宽度大于父项的宽也不会换行，flex不会换行，只会压缩自身的宽度
主轴对齐方式
语法：justify-content：xxx(写在父盒子里)
<style>
div{
display: flex;
justify-content: flex-start;
}
</style>
左对齐：flex-start
右对齐：flex-end
ter
先两侧对齐，间隔摆放：space-between （sb）
间隔摆放，两侧空间小于中间空间：space-around (sd)
绝对平均：space-evenly (sv)
侧轴对齐方式（单行）
- 上对齐；align-items: flex-start;
- 水平对齐方式： align-items: center;
- 下对齐：align-items: flex-end;
换行
默认情况下
1 flex不会换行的！！
当子元素的总宽度大于父元素的时候 不会换行
只会 挤压子元素
2 设置 换行属性
flex-wrap：wrap
不换行 no wrap
侧轴对齐方式（多行）
/* 上对齐 */
/* align-content: flex-start; */
/* 下对齐 */
/* align-content: flex-end; */
/* 居中对齐 */
/* align-content: center; */
/*上下对齐 */
/* align-content: space-between; */
/* 间隔存放 */
/* align-content: space-around; */
/* 绝对平均 */
/* align-content: space-evenly; */
修改主轴方向
flex-direction
-
row 默认值 水平方向 从左到右 少用
-
row-reverse 从右到左 少用
-
column 从上到下 会用
-
column-reverse 从下到上 少用
flex-direction：column；
子项
-
默认的宽度 由内容撑开
-
默认的高度 等于父项的高
-
如果你修改了 主轴的方向 以上的效果 反过来
flex-direction：column； -
子项 默认的宽度 等于父项的宽度
-
子项的高 由内容撑开
