15天前端学习-第十三天（个人记录）

开始学习flex了

HTML
CSS inherit可以让优先级高的标签继承,如a{color:inherit}
box-sizing:boder-box;可以让容器里面的元素设置边距时不影响到外面
text-indent:1px;首行缩进,在做输入框的时候有用到;
兄弟元素用class的清除浮动伪类是无效的,直接在元素里加clear:both就可以;
当上面的元素有浮动时,下方的元素要使用margin时,会以最上端的元素作为margin的对象,这种情况可以用相对定位解决。

flex弹性布局,能够让布局变得更加灵活简单。
垂直居中:display:flex;添加在父容器的样式上,子项添加margin:auto;就能够垂直居中;

子项布局方向控制(该属性添加在父容器):
flex-direction:row;默认值,行排列,根据水平文档流排列,从左到右;
flex-direction属性:row-reverse 行排列,从右到左跟row相反,column显示为列,即垂直排列;column-reverse垂直排列从下到上

flex子项盒子排列溢出时,会自动修改盒子的宽或者高,直到盒子的内容也溢出时,才真正的溢出父容器。
子项换行flex-warp:nowrap;默认值,不换行.wrap宽度或高度不足换行。wrap-reverse;换行时,反过来排列,
换行时盒子之间会有很大的间隙,因为弹性盒会自动把容器平均分成几部分,换行的盒子会在它的那一部分容器中。

flex-flow:direction warp;将以上两个属性结合到一起的复合写法。参数1:方向,参数2:换行
小结:flex-direction,主要用来控制子项的排列方向以及顺序,如垂直排列,由下往上… 而flex-warp则是用来换行的,换行是顺序还是逆序也能控制*

主轴子项的对齐justify-content:flex-start;默认值,起始位置对齐;
主轴就是弹性盒元素的排列方向,flex-end;值表示从结束位置对齐;center表示居中对齐;
justify-content:space-xx;表示对弹性盒内空白区域的处理;
space-between;两端对齐,两端的子盒会在起始位置,中间的盒子会自适应的隔开;
space-around;环绕对齐,两端的盒子距离两端会有一小段空白间隙;
中间的盒子也会有一段间隙,间隙为两端盒子的两倍;
space-evenly;匀称的空白,即子项之间的间隙空白一样大;

小结:justify-content,用来控制主轴方向元素如何对齐,如果按行排列则是横向轴,按垂直排列则是纵向,以及控制了子项间空白部分如何分配。

justify-conten:space-between的效果↓

子项侧轴对齐align-items:stretch;默认值,子项(有弹性,比如没设定宽)会被拉伸;
flex-start;/flex-end;顶部/底部对齐;center垂直居中;

子项的对齐align-content:stretch;默认值,即换行平分剩余空间,元素在各自空间中;
flex-start/flex-end从顶端/底端开始换行,且换行后元素没有间隙;
center;子项居中对齐无间隙,空白在两端;
space-between;两端对齐
space-around;每一行元素都有自己单独的空间,以及上下行空白间隙;
小结:align-items控制了元素如何在侧轴上排列对齐,与主轴相对的轴。
align-content,能控制子元素在容器内的排列对齐,能很好的解决掉换行后,因为平均分配区域而产生的巨大间隙,

align-content:space-between的效果↓(添加了ustify-content: space-around)