FlexBox布局上

布局作为前端中重要的部分，对于其的掌握尤为重要，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:换行，第一行在下面