0525日重点： Flex布局

参考文档：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

1.flex容器，就是父元素，要先写明display: flex;，再写所需的属性；

.box {
display: flex;
flex-wrap: row;

}

2. flex-wrap属性

如果父容器和子元素分别都设定了宽度，如父500px，子200px，有5个子元素

使用flex-direction: row 或者 flex-wrap: nowrap，之后，子元素的宽度，都会被覆盖，自动变成：父级宽度/子元素的个数=500/5=100

使用flex-wrap: wrap之后，子元素按照自己本身的宽度换行，宽度多出的部分空着。

 

3.如果父容器和子元素分别都设定了宽度，如父500px，子200px，有5个子元素

父容器设：display: flex; 子元素 flex:none; 则所有子元素会按照自身设的宽度200px排成一行。会超出父的宽度。

 

4.设子元素 flex:auto;或者 flex：1，（注意：子元素不能设宽度）则所有子元素会等比例缩小，并占满父元素。

如果某一个子元素，设flex-shrink：0，则这个子元素不会缩小。