flex布局

一、概述flex布局

1、flex布局非常好用，任何一个容器都可以使用Flex布局,但是需要注意版本的兼容性，容器可以理解为是项目的父元素。项目可以是块级元素，也可以是行内元素。

2、缺点：

是PC兼容性相对较差，IE要10，甚至11以上才有很好的兼容，不过大家可以用它在H5页面好好发挥

3、属性：

我们可以用容器属性控制项目的：方向、轴线转折方向、主轴对齐方式、交叉轴对齐方式、多根轴对齐方式
用项目属性控制：排列顺序、放大比例、缩小比例、默认项目本身大小、单个项目的对齐方式

容器： 
flex-direction: row | row-reverse | column | column-reverse; 
flex-wrap: nowrap | wrap | wrap-reverse; 
flex-flow 
justify-content: flex-start | flex-end | center | space-between | space-around; 
align-items: flex-start | flex-end | center | baseline | stretch; 
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目： 
order: 0; flex-grow: 0; flex-shrink: 1; flex-basis: auto; flex 
align-self: auto | flex-start | flex-end | center | baseline | 
stretch;

4、注意：

　　兼容性：对安卓、ios兼容性
　　元素属性冲突：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

二、兼容性解决

父级flex布局：

display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;  /* OLD - Firefox 19- H5不用考虑 */
display: -mz-flexbox; /* TWEENER IE 10 */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

主轴、交叉轴

三、几种常见flex使用示例

1、设置元素垂直居中对齐

<div class="demo">
  <div class="inner">
    <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>
  </div>
</div>

.demo{
  width: 500px;
  height: 300px;
  border: 1px solid purple;
  display: flex;                /*设置为flex布局*/
  justify-content: center;   /*水平居中*/
  align-items: center;     /*垂直居中*/
}
.inner{
  width: 160px;
  height: 160px;
  font-size: 26px;
  border: 1px solid red;
}

2、制作导航栏