一、弹性盒的简介
1、flex（弹性盒、伸缩盒）：是css中的又一种布局手段，他主要用来代替浮动完成页面的布局。
2、flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变。
3、弹性容器：要使用弹性盒，必须先将一个元素设置为弹性容器
通过display 来设置弹性容器： display：flex 设置为块级弹性容器
display：inline-flex 设置为行内弹性容器
4、弹性元素：弹性容器的子元素是弹性元素（弹性项）。
5、一个元素可以同时是弹性容器和弹性元素。
6、flex-direction 指定容器中弹性元素的排列方式
可选值： row 默认值，弹性元素在容器中水平排列（从左向右）。主轴：自左向右
row-reverse 弹性元素在容器中反向水平排列（从右向左）。主轴：自右向左
column 弹性元素纵向排列（自上向下）。主轴：自上向下
column-reverse 弹性元素反向纵向排列（自下向上）。主轴：自下向上
7、主轴：弹性元素的排列方向称为主轴
侧轴：与主轴垂直方向称为侧轴
8、弹性元素的属性：
① flex-grow 指定弹性元素的伸展的系数
当父元素有多余空间时，子元素会按照比例进行分配，默认值为0
② flex-shrink 指定弹性元素的收缩系数
当父元素的空间不足以容纳所有的子元素时，子元素按照比例收缩，默认值为1
二、弹性容器的样式
1、flex-wrap 设置弹性元素是否再弹性容器 中自动换行
可选值： nowrap 默认值，元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 元素沿着辅轴反方向换行
2、flex-flow wrap和direction的简写属性
3、justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列）
可选值： flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布到元素两侧
space-between 空白均匀分布到元素之间
space-evenly 空白分布到元素单侧
当元素设置为竖直方向的flex的时候再设置justify-content是主轴为竖直方向。
4、align-items 元素在辅轴上如何对齐，设置的是元素之间的关系。
可选值： stretch 默认值，将元素的长度设置为相同的值
flex-start 元素不会拉伸，沿着辅轴起边对齐
flex-end 沿着辅轴的终边对齐
center 居中对齐
baseline 基线对齐
5、如果需要讲一个元素水平垂直居中，则可设置为 justify-content：center；
align-items：center；
6、align-content 辅轴空白空间的分布
可选值：
flex-start 元素沿着辅轴起边排列
flex-end 元素沿着辅轴终边排列
center 元素居中排列
space-around 空白分布到元素两侧
space-between 空白均匀分布到元素之间
space-evenly 空白分布到元素单侧
7、align-self 用来覆盖当前弹性元素上的align-items
可选值：
stretch 默认值，将元素的长度设置为相同的值
flex-start 元素不会拉伸，沿着辅轴起边对齐
flex-end 沿着辅轴的终边对齐
center 居中对齐
baseline 基线对齐
三、弹性元素的样式
1、flex-grow 弹性的增长系数
2、flex-shrink 弹性的缩减系数。缩减系数的计算方法比较复杂，缩减多少是根据缩减系数和元素大小来计算的，元素越大，缩减越大。
3、flex-basis 指定元素在主轴上的基础长度
① 如果主轴是横向的，则该值指定的是元素的宽度
② 如果主轴是纵向的，则该值指定的是元素的高度
③ 默认值为 auto ，表示参考元素自身的高度或宽度
④ 如果传递了一个具体的数值，则以该值为准
4、flex 可以设置弹性元素所有的三个样式，设置属性顺序：增长系数 缩减系数 基础长度；
特殊值： initial 表示 “flex：0 1 auto”
auto 表示 “flex：1 1 auto"
none 表示 “flex：0 0 auto” 弹性元素没有弹性
5、order 决定了弹性元素的排列顺序
四、像素
1、屏幕是由一个一个打光的小点构成，这一个个的小点就是像素。例如分辨率为1920*1080说的就是屏幕中小点的数量。
2、在前端开发中像素分成两种情况讨论：CSS像素和物理像素 。
① 物理像素：上述说的小点点就是物理像素
② CSS像素：编写网页时，我们所用像素都是CSS像素
3、浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现。
4、一个CSS像素最终由几个物理像素显示，由浏览器决定。
5、默认情况下，在pc端，一个CSS像素=一个物理像素
五、视口（viewport）
1、视口就是屏幕中用来显示网页的区域。
2、可以通过查看视口的大小，来观察CSS像素和物理像素的比值。
默认情况下：视口宽度1920px（CSS像素）——1920px（物理像素），此时CSS像素和物理像素比值是1：1
放大两倍的情况下 960px（CSS像素）——1920px（物理像素），此时CSS像素和物理像素比值1:2
3、我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值。
六、移动端
1、在不同的屏幕中，单位像素的大小是不同的，像素越小屏幕会越清晰。
2、智能手机的像素点远远小于计算机的像素点。
3、默认情况下，移动端的网页都会将视口设置为980px（CSS像素），以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页。
4、http://material.io/resources/devices/ 此网页有大部分移动端跟pc端网页的最佳像素比大全。
5、基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网页。
七、完美视口
1、移动端默认的视口大小是980px（CSS像素）。
2、默认情况下，移动端的像素比是 980/移动端宽度。
3、如果我们直接在网站中编写移动端代码，这样在980的视口下像素比非常不好，导致网页中的内容非常小。
4、编写移动页面时，必须要有一个比较合理的像素比，可以通过meta标签来设置视口大小。
5、每一款移动设备设计时都会有一个最佳像素比，一般我们只需要将像素比设置为该值即可得到一个最佳效果。
6、将像素比设置为最佳像素比的视口大小我们称其为完美视口。
7、将网页的视口设置为完美视口：<meta name="viewport" content="width=device-width, initial-scale=1.0">
八、vw单位
1、不同设备的完美视口的大小是不一样的。
2、由于不同设备视口和像素比不同，所以同样的像素在不同的设备下意义不一样，比如在iphone6中375px就是全屏，但是在plus中就会缺一块，所以在移动端开发时就不能使用px进行布局。
3、vw表示的是视口的宽度（viewport width）
100vw=一个视口的宽度
1vw=1%视口宽度
4、vw这个单位永远相当于视口宽度进行计算
例如：
九、vw适配
1、网页中字体大小最小是12px，不能设置一个比12px像素还小的字体。如果我们设置了一个小于12px的字体，则字体自动设置为12px。
2、在上图中0.13333333vw=1px，则5.333333vw=40px，可以设网页字体大小为5.33333333vw，所需宽度、高度除以40就是代码输入的长度，单位为rem（相当于1rem=40px）。
3、rem —— 1rem=1html的字体大小
十、响应式布局——媒体查询
1、响应式布局：
① 网页可以根据不同的设备或窗口大小呈现不同的效果
② 使用响应式布局，可以是一个网页适用于所有设备
2、响应式布局的关键就是 媒体查询：通过媒体查询可以为不同的设备或者设备不同状态来分别设置样式。
3、媒体查询
① 语法： @media 查询规则{ }
② 查询规则及媒体类型（设备类型），可选值： all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
③ 可以使用，连接多个媒体类型，这样它们之间就是一个或的关系。
④ 可以在媒体类型前添加一个only，表示只有；only的使用是为了兼容一些老版本的浏览器。
⑤ 媒体特性：
width 视口的宽度
height 视口的高度
min-width 视口最小宽度（视口大于指定宽度时生效）
max-width 视口最大宽度（视口小于指定宽度时生效）
⑥ 使用媒体特性时的语法：
@media （max-width：200px）{ }
4、样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化。
5、一般比较常用的断点：
小于768 超小屏幕 max-width=768px
大于768 小屏幕 min-width=768px
大于992 中型屏幕 min-width=992px
大于1200 大屏幕 min-width=1200px
6、关于设计响应式网页，一般是先设计移动端在渐进增强到pc端。
本文分享到此结束，截至目前关于CSS的重要内容的学习先告一段落，下一节开始将分享JavaScript的初级学习内容。
标签：flex,元素,弹性,像素,视口,CSS From： https://blog.csdn.net/weixin_56855018/article/details/141260829