flex布局（15min）

让子盒子在父盒子中垂直居中的方法？

参考：

让子盒子在父盒子中垂直居中的七个方法_子容器在父容器中垂直居中-CSDN博客一、用padding实现1.padding-top = (父盒子的高度 - 子盒子的高度) / 22.padding-left = (父盒子的宽度 - 子盒子的宽度) / 23.由于padding会撑大盒子，所以父盒子的宽高要减去对应的padding值 <..._子容器在父容器中垂直居中https://blog.csdn.net/al654123/article/details/104562026（简写：margin padding 纯计算

              子绝父相或子绝父相加translate

               父盒子定位，主轴侧轴全部center）

分辨率：

1. 物理分辨率：硬件所支持的，屏幕出厂就设定无法修改

2. 逻辑分辨率：软件可以达到的， 我们开发中写的是逻辑分辨率

主轴对齐方式

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

侧轴对齐方式

属性值	作用
flex-start	起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

参考：

彻底理解CSS Flexbox布局，看这一篇就够了！ - 掘金Flexbox布局的概念 Flexbox布局也叫Flex布局，弹性盒子布局。它的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间https://juejin.cn/post/7004622232378966046