CSS笔记

CSS

1. pointer-events把值设为none可以让元素不捕获事件，可以理解为让他看得见摸不着。
2. 给盒子添加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;
}