flex布局+css3中：nth-child伪类的使用+overflow的属性

一. flex布局

1.flex的布局原理

给父盒子增添flex属性，来控制盒子的位置和排列方式

2.flex的常见属性

flex-direction：属性决定排列方向

justify-content：设置主轴上的对齐方式

justify-content：space-around的演示效果
从

到

flex-wrap：设置子元素是否换行
flex布局中默认的子元素是不换行的，如果装不开，会缩小子元素的宽度放在父元素里面

align-items设置侧轴上的子元素排列方式（单行）

拉伸的效果

align-content设置侧轴上子元素的排列方式

flex-flow是flex-direction和flex-wrap属性的复合属性

二.css中flex：initial flex：0 flex：1 flex：none flex：auto的区别

1.flex：initial

所含的内容<盒子的大小 盒子大小不变
所含的内容>盒子的大小 盒子将变大

2.flex：0

所含内容<盒子大小 盒子缩小
所含内容>盒子大小 盒子大小不变

3.flex：1

盒子会随着内容的变化而适当的放大，缩小

4.flex：none

盒子的大小即为所装内容的最大容量

5.flex：auto

容器尺寸不足是最先优化内容尺寸，既可以放大盒子，也可以缩小尺寸

三. :nth-child伪类的使用

选中的元素是该父元素下的第几个儿子

四overflow的属性

本周总结：这周考核，考核内容是制作英雄联盟的网页，当时学的时候，不咋会用，这周实操的时候，直接整懵了，哎，用的时候可艰难，不断地搜如何使用，这算另一种会用的方法，过程很艰难，但是每当会一个知识点的时候，就很nice，啊啊啊超高兴，看来以后得多实操啦！