版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/BeautyBeier/article/details/81392511
布局作为前端中重要的部分，对于其的掌握尤为重要，Flex布局是一种全新的针对web和移动开发布局应用而生。它可以 简便、完整、响应式地实现各种页面布局。目前它已经得到了所有浏览器的支持。
一、FlexBox布局
1.1FlexBox是什么意思呢？
Flexible(形容词)能够伸缩或者很容易变化，以适应外界条件的变化。
box(名词)：通用的的矩形容器
1.2什么是FlexBox布局？
弹性盒模型：又叫Flexbox，意为弹性布局，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其适应不容的屏幕，为盒装模型提供最大的灵活性。
1.3大部分情况下是处理FlexItem在FlexContainer中的位置和尺寸关系
容器默认存在两根轴：水平的主轴和垂直的交叉轴。
二、flexbox在开发中的应用场景
2.1 Flexbox在布局中能够解决什么呢？
浮动布局
各种机型屏幕的适配
水平和垂直居中
自动分配宽度
2.2在css中，常规的布局是基于块和内联方向，而flex布局师基于flex-flow布局
flex-direction://改变主轴的方向
justify-content://设置主轴的对齐方式
align-items:center//设置侧轴的对齐方式
三、 Flex的属性
3.1容器的属性
flexDirections:‘row|row-reverse|column|column-reverse|’
row:主轴在水平方向，起点在左侧；
row-reverse:主轴在水平方向，起点在右侧
column:主轴在垂直方向，起点在左侧；
3.2元素属性
a)flex
“flex-grow”、’flex-shrink’和“flex-basis”这三个属性的属性，其中第二个和第三个参数是可选参数
默认值为“0 1 auto”
宽度 = 弹性宽度 * （flexGrow / sum(flexGrow)）
b)flex-wrap
默认情况下，item排列在一条线上，即主轴上。flex-wrap决定当排列不下时决定换行的方式以及可能的值
nowrap:自动缩小项目，不换行；
wrap：换行，且第一行在上方
wrap-reverse:换行，第一行在下面
