给父元素设置display:flex后 , 子元素变为类似于inline-block状态
display: -webkit-flex; /*Safari*/ display: flex; /*弹性布局*/
flex-direction规定flex布局的方向(在父元素处设置)
flex-direction: row; /*default 横向显示*/ flex-direction: column; /* 纵向显示, 设置此属性会将子元素中的行内元素变为块级元素 */
flex: [number] 给子元素设置, 规定该子元素在所有子元素中所占比重
flex:1 flex:2
规定盒模型 边框和padding包含在宽高内部
-webkit-box-sizing: border-box; box-sizing: border-box;