给父级设置一个display:flex属性,子元素设置flex相关属性才可以自动分配宽高。
如果父级的空间足够:flex-grow有效,flex-shrink无效。
如果父级的空间不够:flex-shrink 有效,flex-grow无效。
flex属性是以上三者的集合,一般设置为flex:1
nowrap
,还有一个值是wrap-reverse
flex-wrap
flex-direction
;align-items
一样。不过多了一个auto值:
auto:如果'align-self'的值为'auto',则其计算值为元素的父元素的'align-items'值,如果其没有父元素,则计算为'stretch'。reisze:
both
none
horizontal
vertical
box-reflect:a b c;
a:left/right/above/below
b:距离本体多远
c:遮盖层
box-sizing
content-box : 默认值 盒子总宽=内(width)+padding+border
border-box : 怪异盒模型 盒子的总宽=width,会对应得缩小内容部分
如果border+padding > width,盒子总宽=border+padding,内容部分为0
column-width:每列的最小宽度
column-count:列数
columns:column-width
column-count
;规定列的宽度和列数。
column-gap:列之间间隙的大小
column-rule:列之间的边框。值与border一样的
column-span:none/all 设置给子元素,规定这个元素跨不夸列
// 下面两个只兼容谷歌
-webkit-column-break-before: 设置或检索对象之前是否断行。设定给子元素,子元素之前是否另起一列 auto/always/avoid
auto:既不强迫也不禁止在元素之前断行并产生新列
always:总是在元素之前断行并产生新列
avoid:避免在元素之前断行并产生新列
-webkit-column-break-after: 设定给子元素,子元素之后
user-select:none; -moz-user-select:none; -ms-user-select:none;