CSS——弹性盒（flex）_css 弹性容器

一、弹性盒的简介

    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的初级学习内容。