flex

01. 弹性盒

flex(弹性盒、伸缩盒)

是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局；
flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变； 1. 弹性容器：
要使用弹性盒，必须先将一个元素设置为弹性容器
我们通过 display 来设置弹性容器

display:flex 设置为块级弹性容器

display:inline-flex 设置为行内的弹性容器

2. 弹性元素

弹性容器的子元素是弹性元素（弹性项）
弹性元素可以同时是弹性容器

flex-direction 指定容器中弹性元素的排列方式。

可选值：

row
默认值，弹性元素在容器中水平排列（左向右） - 主轴自左向右
row-reverse

弹性元素在容器中反向水平排列（右向左） - 主轴自右向左
column

弹性元素纵向排列（自上向下）
column-reverse

弹性元素方向纵向排列（自下向上）

主轴：弹性元素的排列方向称为主轴。

侧轴：与主轴垂直方向的称为侧轴。

弹性元素的属性：

flex-grow 指定弹性元素的伸展的系数：

当父元素有多余空间的时，子元素如何伸展；
父元素的剩余空间，会按照比例进行分配；

flex-shrink 指定弹性元素的收缩系数：

当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 500px;
            border: 10px red solid;
            /* 将ul设置为弹性容器 */
            display: flex;
            flex-direction: row;
        }

        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            
        }
        li:nth-child(1){
            flex-grow: 0;
            flex-shrink: 1;
        }

        li:nth-child(2){
            background-color: pink;
            /* flex-grow: 2; */
            flex-shrink: 2;
        }

        li:nth-child(3){
            background-color: orange;
            /* flex-grow: 3; */
            flex-shrink: 3;
        }
    </style>
</head>
<body>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>

</body>
</html>

收缩前

收缩后

02.弹性容器的样式

flex-wrap:

设置弹性元素是否在弹性容器中自动换行；（容器宽度>元素宽度）

可选值：
- nowrap 默认值，元素不会自动换行；
- wrap 元素沿着辅轴方向自动换行；
- wrap-reverse 元素沿着辅轴反方向换行；

justify-content

如何分配主轴上的空白空间（主轴上的元素如何排列）

可选值：
- flex-start 元素沿着主轴起边排列；
- flex-end 元素沿着主轴终边排列；
- center 元素居中排列；
- space-around 空白分布到元素两侧；
- space-between 空白均匀分布到元素间；
- space-evenly 空白分布到元素的单侧；

<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul{
        width: 800px;
        border: 10px red solid;
      /* 设置ul为弹性容器 */
        display: flex;
        justify-content: center;
     }
    li{
        width: 200px;
        height: 100px;
        background-color: #bfa;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
        flex-shrink: 0;    
    }
    /* li:nth-child(1){
    } */

    li:nth-child(2){
        background-color: pink;
    }

    li:nth-child(3){
        background-color: orange;
    }
</style>

align-items

设置元素在辅轴上如何对齐；
设置元素间的关系
- 可选值：
  - stretch 默认值，将元素的长度设置为相同的值
  - flex-start 元素不会拉伸，沿着辅轴起边对齐
  - flex-end 沿着辅轴的终边对齐
  - center 居中对齐
  - baseline 基线对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 600px;
            height: 800px;
            border: 10px red solid;
          /* 设置ul为弹性容器 */
            display: flex;
            /* flex-direction: column; */
            /* flex-wrap: wrap-reverse; */

            /* flex-flow:  wrap 和 direction 的简写属性 */
            flex-flow: row wrap;

            /* justify-content: center; */
             /*align-items: flex-end;*/
             align-items: center;
             /*align-items: baseline;*/

             /* align-content: 辅轴空白空间的分布 */
             /*align-content: space-between;*/         
        }

        li{
            width: 200px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            flex-shrink: 0;

        }
        li:nth-child(1){
            /* align-self: 用来覆盖当前弹性元素上的align-items */
            align-self: stretch;
        }

        li:nth-child(2){
            background-color: pink;
        }

        li:nth-child(3){
            background-color: orange;
        }

        li:nth-child(4){
            background-color: yellow;
        }

        li:nth-child(5){
            background-color: chocolate;
        }
    </style>
</head>
<body>
     <ul>
         <li>1</li>
         <li>
             2
            <div>2</div>
         </li>
         <li>
             3
             <div>3</div>
             <div>3</div>
        </li>

        <li>4</li>

        <li>
                5
               <div>5</div>
            </li>
     </ul>

</body>
</html>

03. 弹性元素的样式

flex-grow: 弹性的增长系数；

/* flex-grow: 1; */

flex-shrink 弹性元素的缩减系数；

缩减系数的计算方式比较复杂
缩减多少是根据缩减系数和元素大小来计算

flex-shrink: 1;

flex-basis 指定的是元素在主轴上的基础长度

如果主轴是 横向的 则该值指定的就是元素的宽度；

如果主轴是纵向的则该值指定的是就是元素的高度；

默认值是 auto，表示参考元素自身的高度或宽度
如果传递了一个具体的数值，则以该值为准

flex 可以设置弹性元素所有的三个样式：

flex 增长缩减基础;

initial 对应 "flex: 0 1 auto"；

auto 对应 "flex: 1 1 auto"；

none 对应 "flex: 0 0 auto" 弹性元素没有弹性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 900px;
            border: 10px red solid;
            /* 设置弹性盒 */
            display: flex;
        
        }

        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;

            /* flex-grow: 1; */

            /* flex-shrink: 1; */

            /* flex-basis: auto; */

            /* 
                flex 可以设置弹性元素所有的三个样式
                    flex 增长 缩减 基础;
                        initial "flex: 0 1 auto".
                        auto  "flex: 1 1 auto"
                        none "flex: 0 0 auto" 弹性元素没有弹性
            */
            flex: initial;

        }
        li:nth-child(1){
            /* order 决定弹性元素的排列顺序 */
            order: 2;
        }

        li:nth-child(2){
            background-color: pink;
            /* flex-grow: 2; */
            order: 3;
        }

        li:nth-child(3){
            background-color: orange;
            /* flex-grow: 3; */
            order: 1;
        }
    </style>
</head>
<body>
    

     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>

</body>
</html>

04. 移动端页面

在移动端页面开发中，不同设备屏幕的尺寸差别较大，故要进行适配就需考虑像素和视口。

1. 像素pixel

屏幕是由一个一个像素组成；

需要分清楚 CSS像素和物理像素的区别。

CSS像素是设计稿中的设计尺寸；物理像素指的是屏幕的物理像素。

浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现。

一个css像素最终由几个物理像素显示，由浏览器决定：默认情况下在pc端，一个css像素 = 一个物理像素

2. 视口viewport

视口就是屏幕中用来显示网页的区域；
可以通过查看视口的大小，来观察CSS像素和物理像素的比值；
默认情况下：视口宽度 1920px（CSS像素） 1920px（物理像素）
- 此时，css像素和物理像素的比是 1:1。
放大两倍的情况：视口宽度 960px（CSS像素） 1920px（物理像素）
- 此时，css像素和物理像素的比是1:2。
我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值。

在不同的显示屏幕上，单位像素的大小是不同的，像素越小屏幕会越清晰。

24寸 1920x1080

iphone6 4.7寸 750 x 1334

智能手机的像素点远远小于计算机的像素点。

默认情况下，移动端的网页都会将视口设置为980像素（css像素）

以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页。

所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验。

为了解决这个问题，大部分网站都会专门为移动端设计网页。

3. 完美视口

移动端默认的视口大小是980px(css像素)，

默认情况下，移动端的像素比就是 980/移动端宽度（980/750）；

如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，导致网页中的内容非常非常的小；

编写移动页面时，必须要确保有一个比较合理的像素比：

1css像素对应 2个物理像素

1css像素对应 3个物理像素

可以通过meta标签来设置视口大小

每一款移动设备设计时，都会有一个最佳的像素比，

一般我们只需要将像素比设置为该值即可得到一个最佳效果；

将像素比设置为最佳像素比的视口大小我们称其为完美视口。

设置视口大小 device-width表示设备的宽度（完美视口）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在HTML中加入次meta标签，即可设置完美视口。

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- 设置视口大小 device-width表示设备的宽度（完美视口）-->
    <!-- <meta name="viewport" content="width=device-width"> -->
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;

        }
    </style>

4. vw适配

不同的设备完美视口的大小是不一样的：

iphone6 -- 375

iphone6plus -- 414

由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，

比如在iphone6中 375就是全屏，而到了plus中375就会缺一块

所以在移动端开发时，就不能再使用px来进行布局了， vw 表示的是视口的宽度（viewport width）

100vw = 一个视口的宽度
1vw = 1%视口宽度

vw这个单位永远相当于视口宽度进行计算：

使用百分比宽度，来保证移动端的显示效果的一致性。

~~但不能使用 width：20%，这种来表现；~~

因为%默认是以参考HTML的宽度，不方便在存在父子关系的情形下使用。

给定设计图的尺寸： 750px 1125px

设计稿宽度： 750px

使用vw作为单位： 100vw

以此为基础，如何创建一个 48px x 35px 大小的元素？

由 100vw = 750px(设计图的像素)
得出

0.1333333333333333vw = 1px

🥁6.4vw = 48px(设计图像素)

4.667vw = 35px

将48px----> 6.4vw

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        width: 6.4vw;
        height: 4.667vw;
        background-color: #bfa;
    }
</style>

5. rem

在根据设计稿写移动端网页时，我们使用vw的方法，对每一个设计尺寸都需要计算一次vw，很不方便。


html{
    font-size:0.1333333vw;
}
.box1{
    /* 
        rem
            - 1 rem = 1 html的字体大小
        
    */
    width: 48rem;
    height: 35rem;
    background-color: #bfa;
}

在CSS中，我们可以利用1 rem = 1 html的字体大小,直接将换算关系写入HTML标签的样式中。

注意： 目前chrome内核浏览器可以正常显示，但旧版本浏览器会因为HTML默认最小font-size：12px,导致显示比例过大。

其中一种解决办法就是：

将0.13333333vw乘以一个系数使得HTML的font-size大于12px;

比如乘以100，就变成13.333333vw = 100px；

1rem=13.333333vw = 100px.

写样式时：

50px（设计稿尺寸）就写作---> 50/100rem.

05. 响应式布局

响应式布局

网页可以根据不通的设备或窗口大小呈现出不同的效果；
使用响应式布局，可以使一个网页适用于所有设备；
响应布局的关键就是 媒体查询；
通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式。

媒体查询

语法：

@media 查询规则{}
- 媒体类型：
  - all 所有设备
  - print 打印设备
  - screen 带屏幕的设备
  - speech 屏幕阅读器
- 可以使用,连接多个媒体类型，这样它们之间就是一个或的关系

注意：

使用时，可以在媒体类型前添加一个only，表示只有。

only的使用主要是为了兼容一些老版本浏览器。

@media only screen {
    body{
        background-color: #bfa;
    }
}

媒体特性：

width 视口的宽度

height 视口的高度

min-width 视口的最小宽度（视口大于指定宽度时生效）

max-width 视口的最大宽度（视口小于指定宽度时生效）

样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化一般比较常用的断点。

小于768 ---超小屏幕--- max-width=768px

大于768 ---小屏幕--- min-width=768px

大于992 ---中型屏幕--- min-width=992px

大于1200 ---大屏幕--- min-width=1200px。

例如下列代码：

    <style>

         @media only screen and (min-width: 500px) and (max-width:700px){
             body{
                background-color: #bfa;
             }
         }
    </style>

将页面在宽度大于500px，小于700px范围内，body背景颜色设为#bfa。

CSS备忘录（六）：flex 、移动端页面 与 响应式布局