flex布局实现子元素在父元素中均匀分布

首先认识一下flex子元素的三个属性,这三个属性控制一个flex子元素的以下几个方面:

• flex-grow: 这个flex子元素得到（伸张）多少positive free space?
• flex-shrink: 从这个flex子元素要消除（收缩）多少negative free space?
• flex-basis: 在flex子元素未伸张和收缩之前，它的大小是多少?
  以上属性通常用一个简写属性flex 表达. 下面的代码设置 flex-grow 属性值为 2, flex-shrink 属性值为 1 ，flex-basis 属性值为auto. 简写如下：

flex: 2 1 auto;

要实现父元素box里面所有子元素均匀分布可通过以下代码即可实现：
对父元素设置display: flex;对其中的子元素设置flex: 1 1 0;

.box{
    display: flex;
  }
.box > * {
   flex: 1 1 0;
 }