CSS
pointer-events
把值设为none可以让元素不捕获事件,可以理解为让他看得见摸不着。给盒子添加box-sizing:border-box
属性,可以随意添加padding值而不用担心盒子总宽高增加。
flex布局
弹性盒子
- 将父容器的display设置成flex,子元素自动成为容器成员。设置为flex之后,子元素的flaot、clear、和vertical-align属性将失效。
.box{
display:flex;
}
- 默认flex子元素在容器内是横向从左向右排列,将direction设为rtl(right-to-left),方向会变反向
flex-direction
指定了弹性子元素在父容器中的位置
row // 横向从左到右排列(左对齐),默认的排列方式
row-reverse // 反转横向排列(右对齐),从后向前排,最后一项排在最前面
column // 纵向排列
column-reverse // 反转纵向排列
justify-content
内容对齐应用在弹性容器上,把子元素沿着弹性容器的主轴线(main axis)对齐
flex-start // 弹性子元素从行头开始挨个填充(默认值)
flex-end // 子元素向行尾紧挨着填充
center // 子元素居中紧挨着填充
space-between // 子元素平均分布在该行上,最前和最后的与边线对齐
space-around // 子元素平均分布在该行上,两边留有一半的间隔空间(与上一个做区别)
- align-items
设置或检索弹性盒子元素在纵轴方向上的对齐方式,与just-content做比较
flex-start // 在纵轴上从头到尾
flex-end // 在纵轴上从尾到头
center // 纵轴上居中放置
baseline // 如果弹性盒子的行内轴和侧轴为同一条,则与flex-start一致,其他情况下,与基线对齐
stretch // 如果指定侧轴大小的属性值为'auto',则会在纵向上充满整行
flex-wrap
用于指定弹性盒子的子元素换行方式
nowrap // 默认,弹性容器为单行。该情况下弹性子项可能会溢出容器
wrap // 弹性容器为多行。溢出部分会被放到新行,子项内部会发生断行
wrap-reverse // 反转wrap排列
initial //
inherit
align-content
用于修改flex-wrap属性的行为。类似于align-items,但不是设置弹性子元素的对,而是设置各个行的对齐
flex-start
flex-end
center
space-between
space-around
stretch
弹性子元素
order
用于子元素的排序,从小到大,可以为负值
order:-1;
margin
,把哪边的margin设置成auto,剩余的空间就会被挤到那边
.flex-item{ //垂直居中
margin-top:auto;
margin-bottom:auto;
}
.flex-item{ // 垂直和水平都居中
margin:auto;
}