弹性盒子 浮动 超出隐藏
CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
flex声明
声明定义：
使用display：flex或display：inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们，会遵循弹性布局。
使用inline-flex 的 弹性盒子不设置宽，宽将是内容的宽。
一般是使用display:flex. inline-flex极少用。
flex:如果没有为父元素设置宽，默认为100%；
inline-flex：如果没有设置宽，，默认为所有子元素的宽的和。
flex-direction属性
用于设置盒子中的子元素的排列方向。
row 从左到右水平排列子元素（默认值）
column 从上往下垂直排列子元素
row-reverse 从右到左排列子元素
column-reverse 从下往上垂直排列子元素
flex-wrap属性
规定flex容器是单行还是多行，是否换行
nowrap:不换行（默认值）
wrap：换行
wrap-reverse 反向换行。
如果内容过多不换行，将自适应的缩小子元素的宽度。
在使用了 display:flex时 换行，垂直方向也会自动分配空间
flex-flow：
是flex-direction与flex-wrap的组合写法。
flex-flow:flex-direction flex-wrap；
概念：
弹性盒子与弹性元素
弹性盒子：指的是使用display：flex或display：inline-flex声明的容器。
弹性元素：指的是弹性盒子中的子元素。
主轴与侧轴（交叉轴）
主轴方向：为子元素排列的方向。可以通过flex-direction改变。
侧轴方向：与主轴方向垂直，为子元素的换行方向。
可以通过flex-wrap改变。
justify-content属性
用于控制弹性元素在主轴上的排列方式。
flex-start 元素紧靠主轴的起点（默认值）
flex-end 元素紧靠主轴的终点。
center 元素在主轴上居中。
space-between 第一元素紧靠起点，最后一个元素紧靠终点，余下的元素平均分配剩余空间。
space-around 每个元素两侧的间隔相等。元素之间的间隔比元素与容器边框的间隔要大一倍。
space-evenly 元素间距平均分配。
align-items属性
控制元素在侧轴上的排列方式。
多行单行都适用的属性。
alingn-items
flex-start 从侧轴开始的地方对齐
flex-end 从侧轴结束的地方对齐
center 中间对齐
stretch 拉伸 没有设置侧轴方向上的宽/高时，等于父盒子的宽或高。
align-content
控制元素在侧轴上的排列方式。只适用于多行显示的弹性容器。
stretch 拉伸
flex-start 元素紧靠行的起点
flex-end 元素紧靠行的终点
center 元素在行中居中
space-between 第一个元素紧靠行的起点，最后一个元素紧靠行的终点，余下元素平均分配剩余空间
space-around 元素在侧轴方向上的间隔相等。
space-evenly 元素间距离平均分配。
align-self属性，用于单个元素
用于控制单个元素在侧轴上的排列方式。
stretch 拉伸
flex-start 侧轴开始的地方对齐
flex-end 侧轴结束的地方对齐
center 中间对齐
