弹性布局
弹性布局，是一种布局方式
主要解决某个元素中子元素的布局方式
它为布局提供了强大的灵活性
概念和语法
基本设置
display: flex; // 将块级元素设置为容器display: inline-flex // 将行内元素设置为容器这里出现了容器这个词，在弹性布局中有容器和项目的说法
容器：要发生(设置)弹性布局的子元素，的**父元素**称为容器项目：要做弹性布局的**子元素们**，称之为项目弹性布局中也有主轴和交叉轴的概念
项目们排列方向的一条轴(类似坐标轴中的x、y轴),就称为主轴和这条主轴垂直相交的轴，就称为交叉轴默认主轴方向是横向排列，即主轴 -> x轴特点
当元素设置成弹性容器后，它的所有子元素变成弹性项目此时项目的float/clear/vertical-align属性会失效容器中的属性
设置主轴方向
flex-direction: 取值：row，默认值，主轴是x轴，主轴起点是左端 row-reverse, 主轴是x轴，主轴起点是右端 column，主轴是y轴，主轴起点在顶部 column-reverse,主轴是y轴，主轴起点在底部设置项目的换行显示
flex-wrap: 取值：nowrap 默认值，空间不够时，也不换行，项目自动缩小 wrap 空间不够就换行 wrap-reverse 换行，并反转上面两项属性可以缩写成
flex-flow:定义项目在主轴上的对齐方式
justify-content: 取值：flex-start,默认值，以主轴起点对齐 flex-end，以主轴终点对齐 center 在主轴上居中对齐 space-between 两端对齐，两端无空白 space-around 每个间距大小相同，两边会留白定义项目在交叉轴上的对齐方式
align-items: 取值：flex-start 交叉轴起点对齐 flex-end 交叉轴终点对齐 center 交叉轴居中对齐 baseline 交叉轴基线对齐，就是交叉轴起点 stretch 前提，项目不写高。占满交叉轴上所有的空间
项目中的属性
只能设置在其中一个项目上，不会影响其他项目的效果order
定义项目排列顺序，值越小，越靠近起点，默认值为0 取值：无单位的整数flex-grow
定义项目的放大比例 如果容器有足够大的剩余空间，项目将按比例放大 取值：无单位整数，默认值0，不放大flex-shrink
定义项目缩小的比例，容器空间不足时，项目该如何缩小 取值：无单位整数，默认值为1。 取值为0，不缩小。取值越大，缩小越快。flex-basis
主轴存在剩余空间时，分配给此项目多少空间，默认auto即本身宽度 类似height和width写法以上三个属性可以缩写为
flex: 默认值是 0 1 auto 常用写法 flex:1 -> 1 1 auto 利用这个可以方便的实现**圣杯布局** 转载一个自认为不错的实现方法[css圣杯布局的实现][1]
align-self
定义当前项目在交叉轴上的对齐方式 这个属性会覆盖掉容器设置的align-items属性 取值：flex-start 交叉轴起点对齐 flex-end 交叉轴终点对齐 center 交叉轴居中对齐 baseline 交叉轴基线对齐，就是交叉轴起点 stretch 前提，项目不写高。占满交叉轴上所有的空间 auto 使用容器定义的align-items的值
以上就是我对弹性布局的一些知识点总结，如有异议，烦请告知，谢谢
不努力
就淘汰