Flex布局

目录

一、flex布局

        1. 主轴对齐方式

        2. 侧轴对齐方式

        3. 伸缩比

        4、主轴方向

        5、弹性盒子换行

二、拓展：

        1、视口：

---

一、flex布局

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

        默认情况下 主要轴在水平 弹性盒子都是沿着主轴排列

        1. 主轴对齐方式

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

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

        2. 侧轴对齐方式

使用align-items调节元素在侧轴的对齐方式

        3. 伸缩比

作用：设置子集盒子的尺寸

         

 

        4、主轴方向

使用flex-direction改变元素排列方向

        5、弹性盒子换行

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

二、拓展：

        1、视口：

        移动端默认不是百分之百 是980

        使用meta标签设置视口宽度，制作适配 不同设备宽度 的网页

目标： 网页宽度和设备宽度(分辨率)相同 。

解决办法：添加视口标签。

视口：显示HTML网页的区域，用来约束HTML尺寸。

        2、百分比布局

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

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