flex布局

1.使用flex实现垂直居中

.parent {
  display: flex;
  justify-content:center;
  align-items:center;
}

2.属性

• flex; flex-grow , flex-shrink 和flex-basis缩写 默认值为 0 1 auto
• flex-grow : item的放大比例
• flex-shrink: item的缩小比例
• flex-basis: 项目占据的主轴空间,默认值为auto

  3.对flex布局的理解

  flex布局是一种css3新增的一种布局方式,可以通过一个元素的display属性设置为flex变为一个flex布局,它的所有子元素都会成为它的item,一个容器有两个轴: 主轴和交叉轴, 可以使用flex-direction来指定主轴的方向,可以使用justify-content来指定元素在主轴上的排列方式,使用align-items来规定元素在交叉轴上的排列方式,还可以使用flex-wrap来规定当一行排列不下时的换行方式. order属性来指定项目的排列顺序,flex-grow来指定排列空间有剩余的时候,项目的放大比例,flex-shrink来指定排列空间不足时,项目的缩小比例