弹性盒子Flex Box

弹性盒子基本概念

1、采用Flex布局的元素成为容器

2、当给元素设为容器后，内部的子元素后悔自动成为容器里的项目（flex item）

3、容器默认有两个方向的轴线，水平的叫主轴（main axis）、垂直的叫副轴（cross axis）

4、主轴的排列方向默认是从左到右，副轴的排列方向是从上到下

Flex常用属性

1、flex-direction 定义子元素的主轴方向

取值有 row 横向从左到右排列

row-reverse：对齐方向与row相反

column：从上往下对齐（顶对齐）

column-reverse对齐方式与column 相反

2、flex-wrap 定义子元素的排列是否超出换行

取值有wrap   flex容器为多行，flex子元素溢出的部分会被到新行，子项内部会发生断行 

3、flex-flow  定义了项目的排列方式

4、align-items 定义子元素在副轴上的对齐方式

取值有center  规定子元素在副轴上居中

5、justify-content 定义子元素在主轴上的对齐方式

取值有center 子元素向行中间位置对齐

space-between 子元素平均分布在行里，之间的空白空间相等，同时第一个元素和最后一个元素与起始边界对齐

6、align-content 定义了元素在副轴上的对齐方式，与justify-content

取值有center、space-between

 

通常我们通过display 设置flex  将对象设为弹性盒子