css根据屏幕自动得到宽高并计算：

css中可以使用calc（）函数
此 CSS函数允许在声明 CSS 属性值时执行一些计算如calc（100% - 50px）注意运算符左右两侧需要加空格
再利用css中的视窗单位
视窗(Viewport)是你的浏览器实际显示内容的区域——换句话说是你的不包括工具栏和按钮的网页浏览器。这些单位是vw,vh,vmin和vmax。它们都代表了浏览器（视窗(Viewport)）尺寸的比例和窗口大小调整产生的规模改变。

vw——代表视窗(Viewport)的宽度为1%
vh——窗口高度的百分比 50vh = 400px。
vmin——vmin的值是当前vw和vh中较小的值。
vmax——大尺寸的百分比。50vmax = 500px。

所以计算实现自动计算某一弹窗位置等场景就变得简单，如：left：calc（100vw - 100px），top：calc（100vw - 100px）等

flex布局

flex布局十分简单灵活，几行代码就可以实现大部分的布局，并且很大程度减少了float、绝对定位等属性的使用，避免脱标带来的问题。
设置在容器上的属性:

1、display:flex|inline-flex
  //如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex
2、 flex-direction: row | row-reverse | column | column-reverse;
//row ：默认值主轴为水平方向，起点在左端
//row-reverse：主轴为水平方向，起点在右端
//column：主轴为垂直方向，起点在上沿
//column-reverse：主轴为垂直方向，起点在下沿
3、
 flex-wrap: nowrap | wrap | wrap-reverse;
// flex-wrap: 决定容器内项目是否可换行
//默认值nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
//wrap：项目主轴总尺寸超出容器时换行，第一行在上方
//wrap-reverse：换行，第一行在下方
4、
justify-content: flex-start | flex-end | center | space-between | space-around;
// justify-content：定义了项目在主轴的对齐方式。
//flex-start 左对齐（默认）
// flex-end 右对齐
// center 居中
// space-between 两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
// space-around  每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。
5、
align-items: flex-start | flex-end | center | baseline | stretch;
//当主轴方向为垂直向右时，即（flex-direction: row）该属性生效，用于设置居中方式
//stretch：默认值，如果项目未设置高度或者设为 auto，将占满整个容器的高度
//flex-start： 交叉轴的起点对齐 https://pic3.zhimg.com/80/v2-26d9e85039beedd78e412459bd436e8a_720w.jpg
//flex-end： 交叉轴的终点对齐 https://pic4.zhimg.com/80/v2-8b65ee47605a48ad2947b9ef4e4b01b3_720w.jpg
//center：交叉轴的中点对齐
//baseline: 项目的第一行文字的基线对齐;以文字的底部为主
6、
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
// 有换行就要参考这个属性
// 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用;
// 建立在主轴为水平方向时测试，即 flex-direction: row, flex-wrap: wrap
// stretch:默认值，当值为 stretch 时会三条轴线平分容器的垂直方向上的空间。
// flex-start：轴线全部在交叉轴上的起点对齐
// flex-end：轴线全部在交叉轴上的终点对齐
// center：轴线全部在交叉轴上的中间对齐
// space-between：轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。
// space-around：每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍。

注意：当设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

flex项目属性

1、
order: <integer>;
// 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
2、
flex-basis: <length> | auto;
// 定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
// 默认值：auto，即项目本来的大小, 这时候 item 的宽高取决于 width 或 height 的值。
// 当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。

参考知乎作者：flex项目属性部分待后续更新
https://zhuanlan.zhihu.com/p/25303493