FLEX布局
1、移动端特点
（1）屏幕大小
PC屏幕大，一般有版心；移动端屏幕小，宽度100%；另外一种是兄弟关系，也叫并列关系，例如，
PC的域名一般为www.abc.com，移动端域名一般为m.abc.com或者wap.abc.com；
（2）手机模拟器
在谷歌浏览器点击右键，选择“检查”；然后点击小手机图标，打开谷歌模拟器；在该界面可以点击右上角的“三个点”图标，用来布局移动端显示模式，查看手机型号（如果目标手机型号不在列表，可以点击“编辑”来添加目标手机型号）、尺寸、分辨率等数据。
（3）屏幕分辨率
白龙网指出，屏幕分辨率是以a*b这种形式展示的，单位是px，表示宽度为a像素，高度为b像素；分为物理分辨率（出厂设置好的，无法改变的）、逻辑分辨率（可由软件驱动设置的）两种。就PC端而言，也可以理解为默认的是物理分辨率，用户自己设置的是逻辑分辨率。例如，谷歌浏览器上的手机模拟器上显示的iphone6、7、8分辨率375*667，它就是个逻辑分辨率，一般来说，物理分辨率与逻辑分辨率的比例关系是2：1，由于可以推出其特别分辨率，即375*2与667*2。
（4）视口标签
开发移动端网页时，必须添加视口标签，他的作用是网页宽度与设备宽度（逻辑分辨率）保持一致，视口标签在VSCODE中是自带的，知道即可；如果不添加视口标签，移动端网页宽度默认是980。PC端其实也有视口，只不过他默认就是100%，所以PC端开发时不用考虑这个因素。
（5）测量宽高
二倍图是为了让图片的分辨率高一些，更加清楚。如果拿到了个宽度为750像素的移动端设计稿，那么他肯定是一个二倍图；在“像素大厨Pxbox->开发模式->设计稿->2px”下测量图片的宽度、高度才是准确的。而像素大厨默认情况下是一倍像素。这里需要从一倍像素往2倍像切换一下。
2、百分比布局
百分比布局，也叫流式布局，实现的效果是高度固定，宽度自适应。随人们要求的提示，现在大家一般都要求宽度、高度都要自适应。
<style>
* {
margin: 0;
padding: 0;
}
.toolbar {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background-color: pink;
}
.toolbar ul li {
float: left;
display: inline-block;
width: 20%;
height: 50px;
}
.toolbar img {
width: 100%;
}
</style>
</head>
<body>
<div class="toolbar">
<ul>
<li><img src="./images/car.png" alt=""></li>
<li><img src="./images/classify.png" alt=""></li>
<li><img src="./images/index.png" alt=""></li>
<li><img src="./images/jd.png" alt=""></li>
<li><img src="./images/login.png" alt=""></li>
</ul>
</div>
</body>
3、flex布局
对于弹性布局而言，主要是研究子元素（弹性盒子）在父元素（弹性容器）内的排列方式。不管哪种排列方式，都要先在父元素中打开弹性布局，即：声明弹性布局display:flex。
对于弹性布局的排列方式，重点关注默认情况下，主轴在水平方向（justity-content）、侧轴在垂直方向(algin-items)的排列方式；同时也要熟悉，改变主轴方向（flex-derection:column）到垂直方向（justity-content）、侧轴到水平方向（algin-items）后的视觉效果：此时水平对齐用algin-items，垂直对齐用：justity-content。
当然，弹性布局也是可以控制子元素宽度超过父元素宽度时就换行（flex-wrap），换行之后又涉及到行的对齐方式（align-content），它与justify-content主轴对齐方式基本相同。
弹性布局上述五种对齐方式的属性均是在父元素中声明；如果要单独控制子元素中某一个元素的对齐方式，可以选中某个子元素，为某个子元素单独添加aligh-self属性即可。如果要控制某个子元素占用父元素剩余尺寸的份数，则可以在子元素中控制flex:1（数字根据实现情况修改即可）。截止目前，弹性布局中，常用的在子元素中控制CSS的属性就学习这两个。
flex布局，也叫弹性布局，是浏览器提倡的一种布局模型，布局网页速度快，够灵活，可以规避浮动脱标等问题。
flex而已模型有4部分组成，分别是弹性容器、弹性盒子、主轴、侧轴/交叉轴。设置方式为，在弹性容器上设置display:flex，则弹性盒子会自动挤压或者拉伸。换而言之，flex布局可以用于父子关系的布局中，把父元素设置为display:flex，则子元素会自动水平排列。默认情况下，主轴在水平方向，侧轴在垂直方向，故而此时的子元素是水平排列。如果改变了主轴的默认水平位置，那么子元素就不一定在一水平方向排列了。
（1）主轴对齐方式
常用的水平对齐方式有4种：居中，两端对齐，分散对齐，环绕对齐，如下：
<style>
.box {
display: flex;
/* 居中对齐 */
justify-content: center;
/* 间距在弹性盒子中间 */
justify-content: space-between;
/* 间距在弹性盒子两边，弹性盒子两边的间距不相等，且弹性盒子之间的间距是弹性容器两边间距的2倍 */
justify-content: space-around;
/* 间距在弹性盒子的两边，弹性盒子两边的间距相等 */
justify-content: space-evenly;
border: 1px solid black;
}
.box div {
width: 100px;
height: 100px;
background-color:pink
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
（2）侧轴对方方式
A.垂直排列所有盒子
侧轴对齐方式中，也就是垂直对齐，常用的属是：子元素居中和子元素拉伸，子元素拉伸有两种实现方法，一是父元素设置display:flex; 子元素不设高度，即可垂直拉伸；二是父元素设置display:flex,同时父元素设置align-items:stretch；子元素不设高度。
<style>
.box {
display: flex;
height: 300px;
/* 侧轴居中 */
align-items: center;
/* 拉伸效果要想生效，子元素不能设置高度；这也说明，如果没有父元素中没有strectch且子元素中没有高度时，单单一个display:flex也具有垂直拉伸的功能。 */
/* align-items: stretch; */
border: 1px solid black;
}
.box div {
width: 100px;
height: 100px;
background-color:pink
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
B.垂直排列某个盒子
侧轴对齐某个盒子，首先需要在父元素中声明display:flex；然后在子元素中使用伪类选择器，借助align-self:center，才能实现。align-self与align-items的属性值一样。
<style>
.box {
display: flex;
height: 300px;
border: 1px solid black;
}
.box div {
width: 100px;
height: 100px;
background-color:pink
}
.box div:nth-child(2) {
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
弹性布局中，子元素如果没有给宽度、高度，那么子元素就按照元素的内容撑开盒子；如果子元素给了宽高、高度，那么子元素就按照给定的宽高、高度撑开；当然，如果父元素了额外给了stretch，子元素没有给高度，那么子无疑按照父元素的高度撑开。
C.伸缩比
弹性布局的伸缩比的使用方法，在父元素中声明display:flex;然后在子元素中使用flex:1；数值类型的属性，表示子元素占父元素剩余尺寸的份数。
<style>
.box {
display: flex;
height: 300px;
border: 1px solid black;
}
.box div {
margin: 0 5px;
background-color:pink
}
.box div:nth-child(2) {
}
.box div:nth-child(1){
width: 60px;
}
.box div:nth-child(2) {
flex: 2;
}
.box div:nth-child(3) {
flex: 1;
}
.box div:nth-child(4) {
flex: 3;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
（3）改变主轴方向-flex-direction
默认情况下，主轴在水平方向，可以使用flex-direction:column属性把主轴改变到垂直方向。如果主轴在水平方向，那么justify-content属性改变水平方向上子元素的排列方式，而align-items改变垂直方向侧轴上子元素的垂直排列方式；如果主轴在垂直方向，那么，justify-content改变垂直方向上子元素的排列方式，而align-items改变水平方向上侧轴子元素水平排列方式。
<style>
* {
margin: 0;
padding: 0;
}
li {
width: 200px;
height: 200px;
/* 默认情况下，主轴在水平方向，justify-content: center;可让子元素水平对齐；侧轴在垂直方向，align-items: center;可让子元素垂直对齐 */
display: flex;
/* justify-content: center; */
/* align-items: center; */
/* 如果改变主轴在垂直方向，那么水平方向的一行内容会变成垂直方向的一行内容；那么，此时justify-content: center;可以让垂直方向主轴上的元素垂直对齐；此时侧轴在水平方向，align-items: center;可以让水平方向侧轴上的子子元素水平对齐。 */
flex-direction: column;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
border: 1px solid black;
}
img {
width: 32px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="./images/media.png" alt="">
<span>媒体</span>
</li>
</ul>
</div>
</body>
（4）强制换行
弹性布局下所说的换行，一般都是批子元素换行。设置父亲元素为display:flex+flex-wrap,就可以让子元素在排列时，超过子元素的宽度后自动换行。
<style>
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 900px;
border: 1px solid black;
list-style: none;
}
li {
height: 100px;
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
（5）行对齐方式
行对齐方式生效的前提下，必须有换行的操作。否则，行对齐方式不生效。
<style>
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
flex-wrap: wrap;
/* 换行之后，align-content可设置行的对齐方式，属性值基本与主轴的对齐方式一致，行对齐方式没有evenly。 */
/* align-content: center; */
/* align-content: space-around; */
align-content: space-between;
width: 400px;
height: 600px;
border: 1px solid black;
list-style: none;
}
li {
height: 100px;
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
固定定位后的元素会脱标，即宽度会消失，此时给一个100%的宽度即可。
分析负面不同模块的相同样式，写成公共样式，不同模块模块调用即可，简单代码。
图片宽度设置为100%时，控制其父级标签的宽度，即可灵活的控制图片的宽度。
弹性布局常用的技巧，对于3列元素的布局，父元素display:flex；并且justify-content:space-between;固定两边的元素后，把剩下的部分在子元素中flex:1;分成一份，全部给中间的元素。
拿到宽度为3840px的设计稿件时，一般我们可以除以2来看，他刚好是1920px的宽度，说明这个设计稿件是二倍图。此时要准确测量出图片中各版块的尺寸，就要在像素大厨中调节参数至二倍像素环境下，否则开发的网页尺寸就不准确了。
接手二手项目时，要分清楚，已有项目的样式布局方式。例如，网站头部、底部区域背景是白色，那么你要搞清楚，他是用浏览器默认的白色背景，还是自定义通栏目的白色背景。如果是自定义通栏的白色背景，那么后续模块的开发，就可以使用body来定义剩余全部背景色；如果网站头部、底部是使用的是浏览器默认的白色背景，那么剩余区域如果要定义其它的背景色，就要重新定义一个类，来重新定义不同的背景色。
另外，要特别注意，设计稿的尺寸，进而判断设计稿件是否是二倍图，如果是，此时要要在像素大厨中切换到二倍图状态，以保证像素大厨测量的数据是目标数据。
弹性布局中，左边图片宽度固定，右边空间全部给文字，要想实现超出隐藏的效果，除了基本的3行代码之外，还还需要限制宽度和flex。
.order .goods .txt {
flex: 1;
/* 给定一个宽度，让内容超出隐藏 */
width: 0;
}
.order .goods h5 {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
如果父元素是弹性容器，那么弹性盒子如果是行内元素，此时的行内元素弹性盒子定义宽度、高度也会生效。这有些类似于定位会改变元素为行内块的效果。