弹性盒子

弹性盒布局模型（Flexible Box Layout）是 CSS3 规范中提出的⼀一种新的布局⽅方式。

弹性盒子的特点：1.任何⼀一个容器器都可以指定为flex布局。

                             2.⾏行行内元素也可以使⽤用flex布局。

                             3.webkit内核的浏览器器，必须加上-webkit-前缀。

弹性盒子的意义：采⽤用flex布局的元素，称为flex容器器（flex container），简称“容器器”。它的所有⼦子元素⾃自动成为容器器成员，称 为flex项⽬目（flex item），简称“项⽬目”。

容器器默认存在两根轴：⽔水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框 的交叉点）叫做 main start （主轴起始），结束位置叫做 main end （主轴结束）；交叉轴的开始位 置叫做 cross start （交叉轴起始），结束位置叫做 cross end （交叉轴结束）。
项⽬目默认沿主轴排列列。

弹性盒子属性：1. flex-wrap属性 默认情况下，项⽬目都排在⼀一条线上（⼜又称“轴线”）上。 flex-wrap 属性定义，如果⼀一条轴线排不不下， 如何换⾏行行。

row（默认值）：主轴为⽔水平⽅方向，起点在左端； row-reverse：主轴为⽔水平⽅方向，起点在右端； column：主轴为垂直⽅方向，起点在上沿； column-reverse：主轴为垂直⽅方向，起点在下沿。

                         2. flex-flowflex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值 为 row nowrap 。

nowrap（默认值）：不不换⾏行行（强⾏行行挤压，平均分配宽度）； wrap：换⾏行行，第⼀一⾏行行在上⽅方（从上往下⼀一次排列列）； wrap-reverse：换⾏行行，第⼀一⾏行行在下⽅方（从下往上⼀一次排列列）；

                        3.justify-content 属性justify-content 属性定义了了项⽬目在主轴上的对⻬齐⽅方式。

                        4. align-items 属性 align-items 属性定义项⽬目在交叉轴上如何对⻬齐。

flex-start（默认值）：左对⻬齐 flex-end：右对⻬齐 center： 居中 space-between：两端对⻬齐，项⽬目之间的间隔都相等。 space-around：每个项⽬目两侧的间隔相等。所以，项⽬目之间的间隔⽐比项⽬目与边框的间隔⼤大⼀一倍。