弹性盒子css

1，定义

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

2，内容

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

3，如何设置弹性盒子

1.弹性盒子

display:flex;

.box {

/* 父元素容器，谁有flex谁是容器 */

        display: flex;

}

2.主轴

语法：justify-content: ;

3.交叉轴

语法: 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

每行上下之间的距离与顶上底下两侧距离相等

 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;
 
 
    }