移动端屏幕知识&flex布局我的学习笔记，“移动端屏幕知识&flex布局”。分辨率、自由视口。 flex布局应用、主轴

移动端特点

移动端与pc端网页不同点&谷歌模拟器

PC端网页和移动端网页的有什么不同？

PC屏幕大，网页固定版心；
手机屏幕小，网页宽度多数为100%。

如何在电脑里面边写代码边调试移动端网页效果？

谷歌模拟器

分辨率（逻辑&硬件）

屏幕尺寸

指的是屏幕对角线的长度，一般用英寸来度量。

逻辑分辨率

缩放调节的分辨率（软件设置）

图一：

图二：

物理分辨率

硬件分辨率（出厂设置）

思考：制作网页参考物理分辨率还是逻辑分辨率？

答：逻辑分辨率

解移动端主流设备分辨率

视口

目标：

使用meta标签设置视口宽度，制作适配不同设备宽度的网页（网页宽度和设备宽度(分辨率)相同）。

手机屏幕尺寸都不同，网页宽度为100%
网页的宽度和逻辑分辨率尺寸相同。

思考：默认情况下，网页的宽度和逻辑分辨率相同吗？

答：不同，默认网页宽度是980px

解决办法：

添加视口标签（视口：显示HTML网页的区域，用来约束HTML尺寸。）。

viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）

百分比布局

能够使用百分比布局开发网页

百分比布局，也叫流式布局；
效果：宽度自适应，高度固定。

flex布局

1.目标：能够使用Flex布局模型灵活、快速的开发网页

思考：

多个盒子横向排列使用什么属性？浮动

设置盒子间的间距使用什么属性？margin

需要注意什么问题？浮动的盒子脱标

flex布局/弹性布局

是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题

2.Flex布局模型构成

1.作用

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局

2.设置方式

父元素添加 display: flex，子元素可以自动的挤压或拉伸

3.组成部分

弹性容器
弹性盒子
主轴（主轴=x轴=水平方向）
侧轴 / 交叉轴（侧轴=y轴=垂直方向）

3.主轴对齐方式

目标：使用justify-content调节元素在主轴的对齐方式

在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

修改主轴对齐方式属性: justify-content

属性值	作用
flex-start	左对齐
flex-end	右对齐
center	沿主轴居中排列
space-around（sd）	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧（两侧空间比中间小）
space-between（sb）	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间（两侧子盒子到父盒子边没间距中间中间等分）
space-evenly（sv）	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等（绝对平均空间大小都一样）

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

        /* 1.设置div 变成 flex盒子 弹性flex
        display：flex*/

        /* 2.div中的子元素发生了一些改变
             1.设置了flex的盒子 称之为父项
             2.盒子里面的子元素称之为子项
             
            3.具体变化：
             1.不再区分什么 块级、行内、行内块元素 全部都可以设置宽度 高度
             2.子项 默认宽度由内容撑开，高度等于父项的高度
             3.子项
                使用浮动没有效果 无效！！！
                使用定位、margin、transform都有效！！！
             4.默认情况下  子项总宽度大于父项宽度时 也不会换行！！！
               flex不会换行 只会压缩自身宽度而已！！*/
        div{
            display: flex;
            width: 400px;
            height: 400px;
            margin: 100px auto;
            background-color: pink;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex组成</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        /* 
        df,主轴，侧轴都是给弹性容器设置
        */
        display: flex;
        /* 主轴对齐方式 jc */

        width: 1000px;
        height: 600px;
        background: orange;
      }
      .box span {
        /* 
        弹性盒子(弹性容器的亲儿子子元素)：
          1.弹性盒子就没有显示模式的区别，统统叫做弹性盒子;
          2.默认宽度由内容所撑开，默认高度和父元素一样高；
          3.默认弹性盒子是不会换行的；
         */
        width: 100px;
        height: 100px;
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        line-height: 100px;
        background-color: #0a0;
        border: 1px solid #fff;
      }
      a {
        width: 100px;
        height: 100px;
        background-color: green;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
    </div>
  </body>
</html>

4.侧轴的对齐方式

1.侧轴单行对齐

侧轴对齐（设置元素上下的位置） align-items（ai）：

flex-start（上对齐）
flex-end（下对齐）
center（居中对齐）

注意：align-items 是侧轴单行对齐的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box{
        width: 600px;
        height: 600px;
        background-color: aqua;
        margin: 100px auto;
        display: flex;
        align-items: center;
        /* align-items 侧轴单行对齐标签
            1.flex-start 上对齐
            2.flex-end 下对齐
            3.center 居中对齐*/
    }
    span{
        width: 100px;
        height: 100px;
        background-color: pink;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        line-height: 100px;
    }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

2.侧轴多行对齐

侧轴对齐（设置元素上下的位置） align-content（ac）：

flex-start（上对齐）
flex-end（下对齐）
center（居中对齐）
space-around 两侧空间比中间小
space-between 两侧贴边，中间空间等分
space-evenly 绝对平均空间大小都一样

注意：align-content是侧轴多行对齐的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box{
        width: 600px;
        height: 600px;
        background-color: aqua;
        margin: 100px auto;
        display: flex;
        flex-wrap: wrap;
        align-content: space-evenly;

        /* align-content 侧轴多行对齐标签
            1.flex-start 上对齐
            2.flex-end 下对齐
            3.center 居中对齐
            4.space-around 两侧空间比中间小
            5.space-between 两侧， 中间空间等分 
            6.space-evenly 绝对平均 空间大小都一样*/
    }
    span{
        width: 100px;
        height: 100px;
        background-color: pink;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        line-height: 100px;
    }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
    </div>
</body>
</html>

3.元素水平居中对齐

（flex布局//定位+位移）两种水平垂直居中方式对比：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            background-color: aqua;
            margin: 100px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            /* display: flex 、justify-content、align-items 写在父元素里面*/
        }
        span{
            width: 200px;
            height: 200px;
            background-color: pink;
            font-size: 20px;
            font-weight: 700;
            text-align: center;
            line-height: 200px;
            
        }
        .box2{
            width: 600px;
            height: 600px;
            background-color: aqua;
            margin: 200px auto;
            position: relative;
        }
        .box2 span{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
    </div>
    <div class="box2">
        <span>2</span>
    </div>
</body>
</html>

5.flex-direction设置主轴方向

介绍：

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction

属性值：

6.flex-wrap换行

介绍：

思考：默认情况下，多个弹性盒子如何显示？

答：一行显示。

弹性盒子换行显示 : flex-wrap: wrap;

调整行对齐方式：align-content（取值与justify-content基本相同）

属性值：

nowrap：默认值，不换行
wrap：换行。

拓展

设置内容换行并省略

{

display: -webkit-box;

overflow: hidden;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}

7.父元素flex后，子项的变化

主轴为x轴

默认宽度等于内容
默认高度等于父项的高
可以设置单个子元素在侧轴上的对齐方式（属性：align-self）
1. 属性值：flex-start(上对齐)
2. flex-end(下对齐)
3. center（居中对齐）
flex：1；设置子项（没设置宽度的子项）占父项剩余宽度的比例为“一份”。
1. 这里所说的1份，没有具体数值，要根据没有设高度的子项每占多少份之和，然后进行再计算。一个子项占的份数可以为1，为2，为3......

主轴为y轴（flex-direction：column）

此时主轴为父元素的y轴，侧轴为父元素的x轴

默认高度等于内容
默认宽度等于父项的宽
可以设置单个子元素在侧轴上的对齐方式（属性：align-self）
1. 属性值：flex-start(左对齐)
2. flex-end(右对齐)
3. center（居中对齐）
flex：1；设置子项（没设置高度的子项）占父项剩余高度的比例为“一份”。
1. 这里所说的1份，没有具体数值，要根据没有设高度的子项每占多少份之和，然后进行再计算。一个子项占的份数可以为1，为2，为3......

8、总结

代码：

   <!-- 
    1默认请求下 行内元素 加宽加高无效

    2给父盒子设置了flex的布局
      1子元素 子项 可以直接加宽高
      2子元素存在默认的宽度和高度
        1宽度由内容撑开
        2高度和父项的高一样

    3子元素
      1使用浮动无效
      2使用定位 margin 变换 有效


    3父项
      1设置主轴的方向 水平（默认）
        属性名：flex-direction；
        属性值：1 row (默认值 行，从左到右)
               2 row-reverse（行，从右到左）
               3 column （列 垂直-从上到下）
               4 column-reverse （列 垂直-从下到上）
      
      2设置主轴的对齐方式
         属性名：justify-content；
         属性值：1 flex-start（左对齐）
                 2 flex-end（右对齐）
                 3 center（居中对齐）
                 4 space-around(sd)（空白间距均分在盒子两侧-两侧空间比中间小）
                 5 space-between(sb)（空白间距均分在盒子两侧-但是贴两侧的盒子贴边的那侧没有间距）
                 6 space-evenly(sv)（弹性盒子沿主轴均匀排列）

      3设置换行
        属性名：flex-wrap；
        属性值：nowrap（默认值，不换行）
                wrap（换行）

      4设置侧轴对齐方式-单行-垂直
        属性名：align-items；
        属性值：flex-start（上对齐）
                flex-end（下对齐）
                center（居中对齐）

      5设置侧轴对齐方式-多行-垂直
      属性名：align-content；
      属性值：1 flex-start（上对齐）
              2 flex-end（下对齐）
              3 center（居中对齐）
              4 space-around(sd)（空白间距均分在盒子两侧-两侧空间比中间小）
              5 space-between(sb)（空白间距均分在盒子两侧-但是贴两侧的盒子贴边的那侧没有间距）
              6 space-evenly(sv)（弹性盒子沿主轴均匀排列）

      6设置子项占父项宽度的比例
        属性名：flex；
        属性值：1、2、3....

      7设置单个子项在侧轴上的对齐方式
        属性名：align-self；
        属性值：flex-start（上对齐）
                flex-end（下对齐）
                center（居中对齐）
             -->

移动端屏幕知识&flex布局

移动端特点

移动端与pc端网页不同点&谷歌模拟器

分辨率（逻辑&硬件）

分类：

屏幕尺寸

逻辑分辨率

物理分辨率

解移动端主流设备分辨率

视口

目标：

解决办法：

百分比布局

flex布局

1.目标：能够使用Flex布局模型灵活、快速的开发网页

2.Flex布局模型构成

3.主轴对齐方式

4.侧轴的对齐方式

1.侧轴单行对齐

2.侧轴多行对齐

3.元素水平居中对齐

5.flex-direction设置主轴方向

介绍：

属性值：

6.flex-wrap换行

介绍：

属性值：

拓展

7.父元素flex后，子项的变化

主轴为x轴

主轴为y轴（flex-direction：column）

8、总结