flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局
注：当我们为父盒子设置弹性布局后，子元素的 float 、 clear 和 vertical-align 属性将失效
.box{ display: flex; } .box{ display: inline-flex; } /*Webkit 内核的浏览器，必须加上-webkit前缀。*/ .box{ display: -webkit-flex; /* Safari */ display: flex; }采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
<style> div{ display: flex; width: 800px; height: 300px; background-color: green; justify-content: space-around; align-items: center; } div span{ width: 240px; height: 150px; background-color: greenyellow; } </style> </head> <body> <div> <span></span> <span></span> <span></span> </div> </body>flex布局的原理：通过给父盒子添加flex属性，来控制盒子的位置和排列方式
在flex布局中，是分为主轴和交叉轴两个方向
默认主轴方向就是x轴方向，水平向右默认交叉轴方向就是y轴方向，水平向下主轴方向是可以通过flex-direction设置的，交叉轴始终垂直主轴。
属性值说明row（默认值）主轴为水平方向，起点在左端（从左到右）row-reverse主轴为水平方向，起点在右端（从右到左）column主轴为垂直方向，起点在上沿（从上到下）column-reverse主轴为垂直方向，起点在下沿（从下到上）图示：为了看得更方便加了边框
默认情况下，项目都排在一条轴线上，flew-wrap属性定义，flex布局中默认是不换行的，如果装不下会缩小子元素的宽度
属性值说明nowrap默认值，不换行wrap换行wrap-reverse换行，第一行在下方假设交叉轴从上到下；在子项为单行的时候使用
属性值说明flex-start（默认值）交叉轴的起点对齐（从上到下）flex-end交叉轴的终点对齐（从下到上）center交叉轴的中点对齐（挤在一起居中）stretch如果项目未设置高度或设为auto，将占满整个容器的高度（拉伸）baseline项目的第一行文字的基线对齐
设置子项在交叉轴排列方式并且只能用于多行子项（单个项有宽度，一行放不下时，换行：flex-wrap:wrap;），单行子项下是没有效果的
属性值说明flex-start（默认值）在交叉轴的头部开始排列flex-end在交叉轴的尾部开始排列center在交叉轴中间显示space-around子项在交叉轴平分剩余空间space-between子项在交叉轴先分部在两头，在平分剩余空间stretch设置子项元素高度平分元素高度
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box { flex-flow: row wrap; } flex属性定义子项分配剩余的空间，用flex来表示占多少份数
控制子项这在侧轴上的排列方式，允许单个项目与其他的项目有不一样的对齐方式。可覆盖align-items属性。
默认值是auto，表示基础父元素的align-items属性，如果没有父元素，则等同于stretch。
数值越小，排列越靠前，默认为0（通过css oder属性调整盒子的位置）
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
