多列布局----伸缩布局-----

Posted 2020-09-25

多列布局：

设置列数：column-count：4 || 2.......

添加列间隙样式，与边框样式border添加一样   column-rule：dashed 3px red

设置列间隙大小   column-gap ：50px

设置列宽：原则：取大有限  如果人为设置自宽度更大，则取更大的值，但是会填充整个屏幕，以为最终的宽度可能也会大于设置的宽度  ；；；  如果人为设置的宽度更小，使用默认计算的宽度   column-width：200px

设置跨列显示  column-span：all

 

伸缩布局：

设置父容器为伸缩盒子：会使每一个子元素自动成伸缩项：display：flex

设置子元素的排列方式 ：flex-start：让子元素从父容器的起始位置开始排列     flex-end 让子元素从父容器的结束为止开始排列  center 让子元素从父容器的中间为止开始排列   space-between 左右对齐父容器的开始和结束，中间平均分，产生相同的间距   space-around 将多余的空间平均的分页在每一个子元素的两边  造成中间盒子的间距是左右两边盒子间距的两倍

justify-content：flex-start   ||  flex-end ||  center  ||   space-between   ||  space-around

flex-wrap：控制子元素是否换行显示，默认是不换行    flex-wrap：nowrap 不换行（会收缩）|| wrap（换行）

flex-direction：设置子元素的排列方向，就是用来主轴方向，默认主轴方向是row(水平方向)

flex-direction：row （水平排列方向，从左到右） || row-reverse(水平排列方向，从右到左) || column（垂直排列方向，从上到下）  || column-reverse（垂直排列方向，从下到上）    

align-items：设置子元素（伸缩项）在侧轴方向上的对齐方式  center || flex-start|| flex-end|| 

子元素内设置的：：：   flow-grow：可以来扩展子元素的宽度 设置当前元素应该占据剩余空间的比例值  flex-gorw默认是0

比例值计算算：当前空间的flex-grow/所有兄弟元素的flex-grow的 和

flex-shrink：定义收缩比例，通过设置的值来计算收缩空间  默认值是1  比例值计算：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和

flex是用来设置当前伸缩子项占据剩余空间的比例值    flex：1

align-self：flex-end|| flex-start||center