弹性盒子与布局

进行弹性盒子的设置

最主要的是改变主轴的方向，不用设置主轴的排列方式，元素占取剩余空间时，会将它旁边的盒子推过去。

进行分布布局的实现

可以通过弹性盒的改变主轴方向等方式，实现图片文字的居中对齐

弹性盒子的注意事项

压缩只存在于主轴方向上，交叉轴不会发生压缩

悬挂式布局

弹性盒子中图片的大小不改变设置：可以通过align-self的属性值来调整图片的位置，避免图片的大小改变

多列

column-count 分栏个数 将区域进行分割

column-width 分栏的宽度 不能与上面的属性进行连用，只能选择一个进行使用

column-gap 分栏的宽度 类似margin值， 设置栏与栏之间的间隔

column-rule 分栏的边框 栏与栏之间的加一个分割线

column-span all 让其中的元素横框所有列

column-fill auto内容自适应高度

balance 平均分配

break-inside： avoid 避免中断元素 需要加在自己本身的位置上，不让元素分开

多列实现瀑布流

section的高度 由内容来支撑

图片宽度的设置

断点的位置 加在本身上

媒体查询

根据不同的显示器，来显示不同的CSS样式

@media all and

and与括号之间有空格

not 就是在此区间中

竖屏 orientation ：portrait

横屏 orientation：landscape