Flex布局简介
- Flex布局与传统布局区别 传统布局：兼容性好、布局繁琐、局限性，不能在移动端很好的布局
flex布局：操作方便、布局极为简单、移动端应用很广泛；PC端浏览器支持情况差，IE11或者更低版本不支持或仅部分支持
建议：如果是PC端页面布局，还是多采用传统布局，如果是移动端或者不考虑兼容性问题，使用Flex布局方式
- 布局原理 Flex布局是Flexble Box的缩写，意为“弹性布局”，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为Flex布局；采用Flex布局的元素，称为Flex容器，它的所有子元素自动成为容器成员，称为Flex项目（flex item）
1、当我们为父盒子设flex布局后，子元素的float、clear和vertical-align属性将失效
2、伸缩布局=弹性布局=flex布局
原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列
Flex布局中常用父项属性
div {
/* 父元素设置流式布局 */
display: flex;
width: 500px;
height: 800px;
background-color: pink;
/* 为父元素设置属性控制子元素排列 */
/* 子元素主轴排方式 默认为row（横排） 另外有 row-reverse（横向反排）column（竖排） column-rever（竖向反排）*/
flex-direction: row;
/* 主轴上面元素排列方式 居中从flex-star(默认)) flex-end space-around平分父元素排列 space-between第一个和最后元素贴近父元素 另外子元素平分 space-evenly全部平分*/
justify-content: flex-end;
/* 主轴元素是否换行 默认不换行 当父元素比较不够时，就平均缩小子元素 另外属性值就是wrap表示换行*/
flex-wrap: nowrap;
/* align-item 侧轴上面的排列单行 属性值为flex-start(默认) flex-end center（居中） stretch(拉伸) */
align-items: flex-end;
/* align-content 在侧轴上面多行的排列 属性值为flex-start(默认) flex-end center（居中） stretch(拉伸) space-around space-between*/
align-content: space-between;
/* 简写属性 flex-direction 和 flex-wrap的简写 */
flex-flow: column wrap;
}
<div><span>1</span><span>2</span><span>3</span></div>
display:flex,给父元素添加，从而控制子元素的排列flex-direction,说明子元素在父元素中排列的主方向，属性值row(横向)、clounm（纵向）、row-reverse(横反向)、clounm-reverse(竖反向)flex-wrap,说明当子元素的大小超过父元素时，时候换行，属性值nowrap(不换行)、wrap(换行)，当不换行时，就会压缩子元素大小justify-content,子元素在主轴上面的排列方式，属性值center(居中)、flex-start(正方向)、flex-end(反方向)、space-ground(平均分父元素)、space-between(第一个最后一个贴紧父元素，其他子元素平分)、space-evenly(所有子元素等间距排列)align-item，用于单列时，在侧轴上的排列，属性值center(居中)、flex-start(正方向)、flex-end(反方向)，stretch(拉伸到父元素高度,子元素没设置高度时)align-content,用于多列时，在侧轴上的排列，属性值center(居中)、flex-start(正方向)、flex-end(反方向)、space-ground(各列或排平均分父元素)、space-between(第一列（排）最后一列（排）贴紧父元素，其他列（排）平分)、space-evenly(所有列（排）等间距排列)flex-flow，用于简写设置主轴的flex-directiont和设置是否换行的flex-wrap
Flex 布局中常用子项属性
span:nth-child(1) {
width: 200px;
height: 200px;
background-color: antiquewhite;
/* 子元素flex属性 order 自己的顺序 默认值是0，越前面值越小*/
order: 1;
/* flex-grow 默认值是0 不占用剩余的空间扩展自己宽度，后面值表示占剩余空间所占份数 */
flex-grow: 2;
/* flex-shrink 表示flex容器不足时，又不换行，元素收缩比列 默认值是1*/
flex-shrink: 1;
/* flex-basis 默认值是auto 指定了flex元素在主轴上的初始大小，优先级比width height高*/
flex-basis: auto;
/* flex 是flex-grow 和flex-shink flex-basis的缩写 */
flex: 2 1 auto;
/* align-self 默认值是auto 控制单独一个flex在侧轴上对齐样式*/
align-self: center;
}
span:nth-child(2) {
width: 200px;
height: 200px;
background-color: greenyellow;
}
span:nth-child(3) {
width: 200px;
height: 200px;
background-color: yellow;
}
order，用于父元素设置了flex的元素，来调整各个子元素的排列顺序，约在前越小，默认第一个为0flex-grow,用于设置是否占用父元素剩余的空间，默认是0，不占用flex-shrink,用于设置当父元素空间不足且没有换行时候，自己自己收缩的比列 默认值是1flex-basic,用于设置自己在主轴上面的初始大小，优先级高于之前设置的width和heightflex,用于简写flex-grow、flex-shrink、flex-basicalign-self,用于设置自己在侧轴上面的对齐样式，属性值center(居中)、flex-start(正方向)、flex-end(反方向)
