flex布局

传统布局,基于盒状模型，依赖于display+float+position。

flex意为弹性布局。任何一个容器都可以指定为flex布局。使用场景：搜索框和一行多行导航栏。

采用flex布局的元素，称为flex容器，简称容器。所有子元素为容器成员成为flex项目，简称项目。

.box{
  display:flex;
}

 行内元素也可以使用flex布局。

.box{
  display:inline-flex;
}

webkit内核浏览器，必须加上—webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意：设为 Flex 布局以后，子元素的float(浮动)、clear(指定段落的左侧或右侧不允许浮动的元素)和vertical-align(垂直对齐)属性将失效。

 flex布局的容器有六个属性

• flex-direction 决定主轴方法 row(默认) row-reverse column(垂直) column-reverse
• flex-wrap 是否换行 nowrap(默认) wrap（换行第一行在上方） wrap-reverse(换行，第一行在下方)