弹性盒模型

一、flex（弹性盒、伸缩盒）

弹性盒子是CSS3的一种新的布局格式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

• 是css中的一种布局手段，它主要用来代替浮动来完成页面的布局
• flex可以使用是元素具有弹性，让元素可以跟随页面的大小的改变而改变

1、弹性容器

直接使用display：flex；

2、弹性元素

把父元素设置为弹性容器之后，那么他的直接子元素（注意只有子元素）就会自动变成弹性元素。弹性元素可以同时是弹性容器也是弹性元素。

3、弹性盒子属性值

inline-flex：弹性盒子与非弹性盒子在同一行显示（规定弹性盒子为行内块元素）

flex：弹性盒子与非弹性盒子不在同一行显示（规定弹性盒子为块元素）

inline-flex会让后面的内容与之在一行显示，但flex是独占一行

二、属性解析

1、flex-grow

指定弹性元素的伸展的系数（写在子元素里面的）当父元素有多余的空间时，子元素如何伸展父元素和按照比例进行分配（默认为0）

2、flex-shrink

指定弹性元素的收缩系（给子元素的）当父元素的空间不足以容纳所有的子元素的时候，对子元素进行收缩。默认为1，当为0时就会溢出。

3、flex-wrap

设置弹性元素是否在弹性容器中自动换行（