这是我参与「第四届青训营 」笔记创作活动的第14天 介绍
flex模型是html5才出现的，很好的解决了float和position的问题，能让元素横着排列，又不会出现塌陷的问题
但他会有浏览器的兼容性问题（pink老师说过一句话：你觉得好用的基本上都有兼容性的问题）
- 在父元素垂直居中一个内容
- 让容器的所有子项相同的可用宽度，无论浏览器给予其的高宽是多少
- 让他们的高度都相同
模型说明
flex框沿着两个轴来进行布局
一个是主轴，一个是交叉轴（其实也许能理解为x,y轴，更好的理解）
注意它是对里面的所有元素进行控制，包括inline元素
蓝桥杯骰子练习有发
骰子的练习有几个点
第一个点是要注意在原生js当中我们需要注意类名污染问题，尽可能从一开始就考虑
第二个点是flex如果使用flex-direction:column，注意得使用justify-content。工作中应该能用到的不多，其实应该就只有一些
flex排序
使用order，其值应该未数字，越靠前，排列顺序也越高。这个功能可以改变布局但不会改变原顺序，然后注意order是负值大于0大于正值
css样式
目录
- flex 和他的儿子们 flex-grow flex-shrink flex-basis
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- flex-row
- align-self
- gap row-gap column-gap
flex
这是一个简写的css样式，他有三个值，分别代表着flex-grow flex-shrink flex-basis
简写的时候，会对输入的值的数量进行判定
其实就两个判断，第一个是有无带单位，第二个是flex-grow>flex-shrink这也解释了下文
当为一个的时候，根据是否带单位判断是不是flex-basis的值
第一个是flex-grow，代表flex项的增长系数，其实就是平常的flex:1；别想太多
第二个是flex-shrink,注意shrink代表着缩略，所以，flex-shrink就代表着flex的盒子缩小时，缩略比，很少用的到，因为一般来说我们都是考虑增长的，因为当宽度变小时都是直接变换里面的布局，不然即使再怎么调都会很丑
第三个是flex-basis，它表示子盒子最少的宽度，单位是px这些竖直
flex-direction
flex-direction代表了方向，四个常用的值(下面有个新单词，reverse，这个词是反转的意思，其实就是改变了元素是顺序还是逆序)
row
column
row-reverse
column-reverse
flex-wrap
控制换行的属性，有wrap和nowrap的值
flex-flow
是flex-direction和flex-wrap的略写
可以这样写flex-flow:column wrap;比较方便
justify-content
这个样式针对的是沿着主轴方向的盒子，他们该如何分配空间，以及他们周围的间距（空白）分配
因此分配两个样式
第一个是盒子的排列·
start,center,end
对弹性元素的排列
flex-start,flex-end 其实就是前面加个flex
left right
第二个是对周围的间距的分配
space-between间隙均匀地分配在盒子的周围，但不包括第一个盒子的左边和最后一个盒子的右边
只有在伪元素不存在的时候才能生效，因为伪元素也会当成弹性盒子
space-around间隙均匀地分配在盒子的周围
space-evenly每个元素之间的间隙相等
align-items
这个是控制一个组的元素在垂直的排列，
用的比较多的是center，而注意stretch（他的中文意思就是拉伸）是默认值，并且使用其他值时，无法让元素进行拉伸，会缩在一块，不过我好奇的一点是如果某个元素高度变高的时候，那么其他元素也会跟着变高吗
center
start
end
stretch
align-content
align-content跟align-items相比，属性相似，但针对的对象不同。align-content针对的是容器里面所有的行（必须在多行的时候才能起到作用），所以在多行的时候两者相同的属性值表现出来的效果可能完全不一样，align-content会尝试以所有行内的元素当做一个整体进行移动，而align-items会把每个行内的元素进行分别控制。
align-self
这个元素注意是专门针对的是子弹性盒子，所以应该就加在子盒子上面去，在添加后会自动覆盖父元素的align-items样式,其他样式的值是跟align-items是相同的
关于align-self和justify-self，justify-self在flex布局中是无效的，这是因为flex布局分配盒子空间的时候，使用的是justify-content，而它总是会将一组元素看成整体，忽略个体，导致其
flex-row
此样式是flex-direction和flex-wrap的略写，
写为flex-row:row wrap
其实跟他们本身的样式应该是一样的，此处原文没有过多介绍
gap
这个属性是row-gap 和column-gap的缩写
第一个值是上下的间隙，第二个值是左右的间隙，就像border一样，别想太多
两个值是有点转弯的，row-gap的意思是行间的间隙，代表着上下的距离
column-gap的意思是列间的间隙，代表着左右的距离
