flex布局是一种无论对于块级元素还是行内元素都可以被采用的布局，且它使用起来也是十分的方便
首先是要指定flex布局
当我们指定flex布局方式的时候，其属性值 float、clear、vertical-align就失效了
无论是块级元素还是行内元素，当他们指定使用flex布局的时候，就被称为“ 容器 ”（flex container）
他们的子元素自动成为容器成员，被称为“ 项目 ”（flex item）。
flex布局是通过两根轴决定的，其实现方式其实和直角坐标系很像，都是通过轴来进行定位
每个容器都有两根轴，分别为水平的 主轴 （main axis）和垂直的 交叉轴 （cross axis）。主轴开始位置为main start，结束位置为main end。交叉轴的开始位置为cross start，结束位置为cross end
容器内的项目都是沿着主轴排列的，这点和块级元素有较大的不同，因为每个块级元素默认是占有一整行的，且排列方式为由上到下排列。
每个项目都占有一定的主轴空间和交叉轴空间，分别被称为main size和cross size
flex布局下，容器和项目都有其各自的属性
决定主轴的方向，即决定项目的排列方向，其属性值有
决定了当一行放不下所有的项目时，其换行与否以及换行方式
定义了项目在主轴上的对齐方式，假设主轴是从左向右的水平排列
定义了项目在交叉轴上的对齐方式，假设交叉轴是从上到下排列
在这里重点说一下上面这两个属性。
这样可以很方便的设置水平垂直居中
另外说一下align-items：baseline这个属性值。如描述，这个属性值是通过文字来进行对齐，而不是每个项目的边界或是中心
在容器内具有多根主轴线时，可以定义这些轴线的对齐方式
align-content属性和justify-content属性，这两者的属性值有较大的相似之处，这是因为，justify-content属性定义的是多个项目在主轴上的对齐方式，而align-content属性定义的是多根主轴在交叉轴上的对齐方式，这两者描述的对象就几乎一致
定义了多个项目的排列顺序，其使用方式和z-index属性值有异曲同工之处，都是指定属性值，属性值为整数。对于order属性，属性值越小，则排列越靠前；对于z-index属性，则属性值越小，就越在底层
设置了项目的放大比例，其默认值为1。
设置了项目的缩小比例，默认值为1。
在分配多余空间之前，为项目定义其占据的主轴空间
用来设置单个项目与其他项目不同的对齐方式，其属性值和align-items的属性的属性值基本一致，不过其默认值为auto，表示继承父元素的属性值。
CSS2.1定义了 4 中布局方式
给任意元素设置 display:flex,弹性布局就会被创建,flex 的子项会发生变化.
flex-direction属性用来控制 flex 子项的整体布局方向,决定是从左往右排序.flex-dirction属性有以下语法
flex-wrap属性用来控制 flex 子项单行显示还是换行显示,以及在换行显示情况下,没一行内容是否在垂直方向的反向显示.
flex-flow属性是 flex-dirction属性和 flex-wrap属性的缩写.表示弹性布局的流动性特性
CSS 在 flex 中属性名称基本上是几个固定单词的组合,且这些单词在整个 CSS 世界中是通用的含义
justify-content 属性在弹性布局中常用的语法如下
align-item和 align-self属性的一个区别是 align-self属性是设置在具体的某个 flex 子项上,而 flex-items 属性是设置在 flex 容器上,器控制 flex 子项的垂直对齐方式,align-self默认值是 auto,其余的数据值个 align-items 属性值一致.属性如下
align-content属性和 align-items属性的区别在于 align-items属性设置的是每一个 flex 子项的垂直对齐方式,而 align-content 属性是将所有作为一个整体进行垂直对齐设置.align-content 属性如下所示
我们可以通过 order 属性来改变 flex 子项的顺序位置.order 属性越小优先级别越高
flex 属性是弹性布局的精髓,因此弹性布局就是 flex 属性的作用.flex 属性是 flex-grow flex-shinrk flex-basic这 3 个属性的缩写.我们先了解下flex 常用的几个声明
表示的是什么意思?
flex-basic 属性用来表示基础宽度
flex-grow 属性表示宽度还有剩余的时候
flex-shrink 属性表示宽度不足的时候
flex:0等同设置 flex:0 1 0%,flex:none等同设置了 flex:0 0 auto.
如果没一行的行数是固定的,则可以使用两种方式实现最后一行对齐
要实现最后一行对齐,理论上最好使用 gap 属性设置间隙
如果每一行的行数不固定,则上面的方法都失效,需要使用其他的方式实现最最后一行对齐.可以使用空白标签进行填充占位,具体的占位数量由最多列数的个数决定
很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。
学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君羊- 点击此处 ，
同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。
————————————————
1.什么是flex
flex 是 Flexible Box 的缩写,意为 弹性布局
flex布局中把一个元素作为容器，容器中的子元素称为项目
可以通过容器的flex属性，设置所有项目的排列样式。也可以通过项目的flex属性，设置指定项目的排列样式。
2.flex布局的方向
flex布局项目的排列方向可以有两个维度，一水平，二垂直
项目排列方向称为主轴，与主轴垂直的方向叫交叉轴
在每个轴上有两个方向，从左至右，从右到左；从上到下，从下到上。
2.1 flex水平布局
在水平维度，默认方向是从左至右
可以通过 flex-direction：row-reverse设置为从右到左排列
效果图：
1).默认方向,从左至右
2).反方向
2.2 垂直布局
效果图：
1).默认方向，从上到下
2).反方向
3. 容器内项目换行
通过flex-wrap属性，设置项目在容器内是否可以换行，默认不允许换行。
不换行的称为单行容器，换行的称为多行容器
也可以通过flex-flow属性同时设置容器主轴方向和是否换行（推荐使用）
效果图：
1).默认不允许换行，项目被压缩
2).允许换行，当剩余宽度不足容纳一个项目块时，就换行
相关知识：
css如何实现边框长度控制功能
详细介绍css中的数学表达式calc()
关于书籍：需要学习资料的小伙伴们可以加群， 点击此处
