web移动第三天，flex布局

一些概念：

设备分辨率：出厂固定，无法更改。
逻辑分辨率：由软件，驱动决定。

image.png

viewport内容

image.png

百分比布局（流式布局）：

高度固定，宽度自适应

flex布局步骤：

1，设置弹性容器：父元素添加 display: flex（简写df）

2，设置对齐方式：jcsb+aic

（ justify-content: space-between;
align-items: center;）

其他对齐方式：

主轴

image.png

侧轴

image.png

单独设置某个弹性盒子的侧轴：

image.png

概念：

在父元素添加display: flex，父元素称为弹性容器

其最近的一层子元素称为弹性盒子

弹性盒子不分（块级，行内块，行内），默认不会自动换行，宽度自适应，太密集则会超出弹性容器

image.png