WEB前端学习笔记（十）——移动WEB（flex布局）

一、移动WEB的特点

1.1 移动端和PC端网页不同点

PC屏幕 大 ，网页 固定版心

手机屏幕 小 ， 网页宽度多数为 100%

1.2 分辨率

总结

        硬件分辨率（出厂设置）

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

分辨率分类

        物理分辨率 是生产屏幕时就固定的，它是不可被改变的

        逻辑分辨率 是由软件（驱动）决定的

制作网页参考逻辑分辨率

1.3 视口

手机屏幕尺寸都不同， 网页宽度为100%

网页的宽度和逻辑分辨率尺寸相同 。

1.4 二倍图

现阶段设计稿参考 iPhone6/7/8 ，设备宽度 375px 产出设计稿。

二倍图设计稿尺寸： 750px 。

二、百分比布局

百分比布局， 也叫流式布局

效果： 宽度自适应，高度固定 。

三、flex布局

Flex布局/弹性布局：

        是一种浏览器提倡的布局模型

        布局网页更简单、灵活

        避免浮动脱标的问题

采用 flex 布局的元素，称为 flex 容器（flex container），简称“容器”。它的所有子元素自动称为容器成员，称为 flex 项目（flex item），简称“项目” 。

3.1 主轴对齐方式（内容对齐）

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

说明：

        around，周围。子元素周围都有空白间距。

        between，之间。子元素之间都有空白间距。

        evenly，平均。子元素周围都有均等的空白间距。

justify，使……对齐。

3.2 侧轴对齐方式

align，使排成一条直线，使平行，使对齐；项目对齐。

3.3 伸缩比

属性

        flex : 值;

取值分类

        数值(整数)

注意 : 只占用父盒子剩余尺寸

3.4 主轴方向

3.5 弹性盒子换行

使用flex-wrap实现弹性盒子多行排列效果

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

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

.box {
    
    display: flex;

    /* 设置主轴方向，默认为水平方向，现在将主轴方向设置为垂直方向*/
    flex-direction: column;

    /* 实现垂直方向居中，主轴方向为垂直方向 */
    justify-content: center;

    /* 实现水平方向居中，主轴方向为垂直方向，设置侧轴居中 */
    align-items: center;
    }