移动端知识点02—弹性盒子

一、定义

        弹性盒子是 CSS3 的一种新的布局模式。

        CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

        引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

二、弹性盒子内容

• 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
• 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
• 弹性容器内包含了一个或多个弹性子元素，子元素可以称为容器内的项目。
• 成为容器后，直接子元素的浮动居中等效果都会失效。
• 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
• 弹性盒子内有主轴和交叉轴，主轴主管水平方向对齐方式，交叉轴主管垂直方向对齐方式

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

三、语法

1、定义弹性容器

语法：display:flex;

   .box {
      /* 父元素容器，谁有flex谁是容器 */
      display: flex;
   
}

2、主轴方向（水平方向）的对齐方式

语法：justify-content: ;

值：

值	解释
flex-start	左对齐
flex-end	右对齐
center	居中
space-between	两端对齐 每两个项目之间的距离相等
space-around	每个项目两侧距离相等
space-evenly	每两个项目之间的距离，与边沿项目距离容器之间的距离相等

示例：

    .box {
      /* 容器，谁有flex谁是容器 */
      display: flex;
      width: 500px;
      height: 500px;
      justify-content: flex-start;
      /* 左对齐 */

      justify-content: flex-end;
      /* 右对齐 */

      justify-content: space-between;
      /* 每两个项目之间的距离相等 */
      
      justify-content: space-around;
      /* 每一个项目两侧距离相等 */

      justify-content: space-evenly;
      /* 每两个项目之间的距离，与边沿项目距离容器之间的距离相等  */
      
      justify-content: center; 
      /* 居中对齐 */
}

3、交叉轴（垂直方向）的对齐方式

语法： align-items: ;

值：

值	解释
stretch	默认值   注意：未定义交叉轴对齐方式且项目未设置高度时或高度为auto时，会自动拉伸为与父容器高度相同，占满整个父容器
flex-start	不加高度默认内容撑开，居上对齐
flex-end	与交叉轴的终点对齐 居下对齐
center	垂直方向上居中对齐
baseline	与第一个项目的第一行文字基线对齐

示例：

 .box {
      /* 容器，谁有flex谁是容器 */
      display: flex;
      width: 500px;
      height: 500px;
    
      align-items: center; /*垂直居中 */
     
      align-items: stretch; /* 默认 */
     
      align-items: flex-start;/* 与交叉轴起点对齐 居上对齐 */
    
      align-items: flex-end; /* 与交叉轴的终点对齐 居下对齐 */
     
      align-items: baseline;   /* 与第一个项目的文字基线对齐 */
     
      background-color: aquamarine;
    }

4、修改主轴方向 （即项目的排列方向）

语法： flex-direction: ;

值：

值	解释
row	默认值，主轴水平方向，起点在左侧
row-reverse	主轴为水平方向，起点在右侧
column	主轴与交叉轴互换位置，主轴为垂直方向，起点在上侧
column-reverse	主轴为垂直方向，起点在下侧

示例：

.box {
      /* 容器，谁有flex谁是容器 */
      display: flex;
      width: 500px;
      height: 500px;
      background-color: aquamarine;
      
      flex-direction: row;
      /* 默认值，起点在右侧 */

      flex-direction: row-reverse;
      /* 主轴为水平方向，起点在右侧 */

      flex-direction: column;
      /* 主轴与交叉轴互换位置，主轴为垂直方向，起点在上侧 */

      flex-direction: column-reverse;
      /* 主轴为垂直方向，起点在下侧 */
	/* 主轴位置改变后，justify-content的效果也会发生相应改变 */
      
    }

注意：主轴方向改变后，justify-content的效果也会发生相应改变

5、项目换行方式

语法： flex-wrap: ;

值：

值	解释
nowrap	默认值，项目不换行
wrap	项目换行，第一行在上方
wrap-reverse	项目换行，第一行在下方，使用较少

    .box {
      /* 容器，谁有flex谁是容器 */
      display: flex;
      width: 500px;
      height: 500px;
      background-color: aquamarine;
      
      /* 项目换行 */
      flex-wrap: nowrap;
      /* 默认值，项目不换行 */

      flex-wrap: wrap; 
      /* 项目换行，第一行在上方 */

      flex-wrap: wrap-reverse; 
      /* 项目换行，第一行在下方，使用较少 */
}

6、align-content 

在换行之后会出现多根轴线，且项目与其下行项目之间会出现缝隙，可以通过设置 align-content的值来解决。

align-content: 定义有多根轴线的垂直对齐方式，如果只有一根轴线，则不起作用。

语法：align-conten: ;

值：

值	解释
flex-start	所有项目整体与交叉轴的起点对齐，缝隙消失
flex-end	整体与交叉轴的终点对齐，居下对齐
center	与交叉轴的中点对齐
space-between	在垂直方向上两端对齐，每两行之间的距离的相等
space-around	每一行上下两侧的距离相等
space-evenly	每行上下之间的距离与顶上底下两侧距离相等

.box {
      /* 容器，谁有flex谁是容器 */
      display: flex;
      width: 500px;
      height: 500px;
      background-color: aquamarine;
      
      /* 项目换行 */

      flex-wrap: wrap; 
      /* 项目换行，第一行在上方 */
      /* 换行之后会有多根轴线 */
      /* 换行之后会有缝隙，下面解决 */

      align-content: flex-start;
      /* 所有项目整体与交叉轴的起点对齐，缝隙消失 */

      align-content: flex-end;
      /* 整体与交叉轴的终点对齐，居下对齐 */

      align-content: center; 
      /* 与交叉轴的中点对齐 */

      align-content: space-between;
      /* 在垂直方向上两端对齐，每两行之间的距离的相等 */

      align-content: space-around;
      /* 每一行上下两侧的距离相等 */

      align-content: space-evenly;
       /* 每行上下之间的距离与顶上底下两侧距离相等 */

      /* 简写：flex-flow:flex-direction flex-wrap  使用较少*/
      flex-flow: column nowrap;


    }