flex item 平分
控制flex元素,有三个属性控制,flex-basis,flex-shrink,flex-grow 。如果期望这些元素能自动地扩展去填充满剩下的空间,那么我们需要去控制可用空间在这几个元素间如何分配,这就是元素上的那些 flex
属性要做的事。
flex-basis 控制元素空间的大小,默认是auto,自动分配小大以充分展示元素的内容;
flex-grow 值为整数,默认是0, 分配可用空间,如果其他元素也被允许延展,那么他们会各自占据可用空间的一部分;
flex-shrink 值为整数,默认是1 处理 flex 元素收缩的问题;
元素item平分,就需要在每个item设置flex:1,即自动伸缩,每个item伸缩等级都一样!!!
某个item设置了宽度,但是还是会被缩放!!!
例如:
grid item 平分
grid-template-columns 基于网格列的维度,定义网格的尺寸大小 ;
grid-template-columns: repeat(4,1fr)
元素item平分,每个item都是1fr!!!
实际过程中,item并没有平分,而是根据item的内容伸缩了,这是为啥呢??
这时候我们来看下CSS中宽度的定义:
width:
注意点:min-width属性优先级高于width;
min-witdh:
注意:当min-width大于width的值,min-width会覆盖max-width和width;
注意:min-width:auto用于弹性元素的默认最小宽度
原因:
通过上面弹性布局和元素width分析,当元素支持收缩时,min-width默认是auto,即元素内容的宽度,所以会导致item撑出平分的宽度!!如果设置宽度,由于是弹性布局,宽度也会被伸缩!!
解决:
如果有宽度,希望宽度不被伸缩,需要把 flex-shrink:0,不允许伸缩!!
如果是平分,元素被撑大,只需要设置 min-width:0!!
同理:height也是一致的