fixed布局在ios中失效 flex布局

一、 flex布局（弹性布局）的介绍：

  flex是Flexible Box的缩写， 意为弹性布局，用来为盒状模型提供最大的灵活性；任何一个容器都可以制定为flex布局， 行内元素也可以使用flex布局， 不过设置为flex布局之后，  子元素的float、 clear、 vertical-align

//任何一个容器都可以制定为flex布局

 .main{     display: flex;  }

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

.main{     display: inline-flex;  }

二、flex容器的属性：

1. flex-direction   2. flex-wrap    3.  flex-flow   4.  justify-content   5. align-items    6. align-content

2.1  flex-direction属性：

    flex-direction 属性决定着主轴的方向。

.main{
    flex-direction: row | row-reverse | column | column-reverse;
}

.main{
    flex-direction: row;   //（默认值）主轴为水平方向， 起点在左边 （上图3）
    flex-direction: row-reverse;   //主轴为水平方向， 起点在右边（反向） （上图4）
    flex-direction: column;      //主轴方向为垂直方向， 起点从上到下    （上图1）
    flex-direction: column-reverse;    //主轴方向为垂直方向， 起点从下往上 （上图2）
}

2.2  flex-wrap 属性：

.main{
    flex-wrap:  no-warp;   //（默认） 不换行
    flex-wrap:  wrap;       //换行， 第一行在上面
    flex-wrap:  wrap-reverse;  //换行，反向，第二行在上面
}

2.3  flex-flow属性：

   flex-flow：  是flex-direction 和 flex-wrap的缩写，默认为row nowrap;

.main{
    flex-flow:  <flex-direction> | <flex-wrap>
}

2.4  justify-content 属性：

justify-content：属性定义了项目在主轴上的对齐方式。

.main{
    justify-content: flex-start;  /* 从左向右 */
    justify-content: flex-end;   /* 从右向左 */
    justify-content: center;     /* 居中排列 */
    justify-content: space-between;  /* 两端对齐，项目之间的间隔都相等 */
    justify-content: space-around;    /* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */  
}

flex-start:

flex-end:

center:

space-between:

space-around: 

2.5  align-items 属性：

align-items 属性定义项目在交叉轴上如何对齐

.main {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

justify-content只能控制水平方向上，如果子元素高度不一致的时候，我们想要控制垂直方向上的布局，特别是在有些图表类的项目里面体现更明显；

flex-start: 

flex-end:

center:

baseline:

stretch:

2.6 align-content属性： (多行对齐)

出现了多行元素，控制多行元素的布局必须要是多行： 
这里我们假设有十个子元素，下面展示一下不同的属性下子元素的排列方式，父元素有固定的宽和高；

该属性有6个取值：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

2.7 flex-grow属性：

.item {
  flex-grow: <number>; /* default 0 */
}

2.8  flex-shring属性：

.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。                    负值对该属性无效。

3、flex应用案例：

代码：

.container{
              display: flex;
              flex-direction: row;
              align-items: flex-start;
              justify-content: space-around;
              flex-wrap: wrap;
              font-size: 5vw;         /* 5vw ==> 320*5%   1vw == 5% */
          }
          .content{
              margin-top: 8px;
              display: flex;
              flex-direction: column;
              align-items: center;
          }
          .content img{
              width: 8em;       /* em ==> 父容器的font-size的大小 * 8  */
              height: 8em;
          }

效果：

在浏览器上切换为手机端，然后查看效果

 

改变手机端的窗口，效果如下，实现并成一列：