css弹性盒子（伸缩盒子）

1、什么是弹性盒子？

• 弹性盒子是 CSS3 的一种新的布局模式。
• CSS3 弹性盒子（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。（手机移动端常用到弹性盒子）
• 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

2、基本概念：

2-1容器：

需要添加弹性布局的父元素,设置了弹性盒子（display:flex;)的这个盒子叫容器

2-2项目：

弹性布局容器中的每一个子元素(孙子就不算，儿子才是），称为项目

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

（1）容器身上的属性：

（2）项目身上的属性：

注意：flex：1；
felx：1；表示：
flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长（放大）
flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小（缩小）
flex-basis : auto（浏览器上是0%）; // 这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕。例如：如果包装器中有3个div，则每个div将占用33％。（默认值为 auto, 即项目本身的大小，宽度自定！）