Flex布局(基本概念,容器属性,项目属性)

一，基本概念

1.弹性盒子布局

2.2009由W3C提出的布局解决方案

3.兼容性：所有的浏览器都支持

4.注意：

1.所有的元素都可以应用flex布局

2.所有应用flex布局的子元素float,clear及vertical-align属性都将失效

1.容器(container)：使用了flex布局的元素就是容器
  display:flex;
  display:inline-flex;
2.项目(items)：使用了flex元素的子元素
3.主轴(main size)：默认水平方向，从左到右，项目默认沿主轴排列；可以通过flex-direction更改
4.交叉轴(cross size)：默认垂直方向，从上到下

二、容器属性

1.flex-direction：设置主轴方向

row：默认，水平方向，从左(main start)向右(main end)
row-reverse：水平方向，从右向左
column：垂直方向，从上向下
column-reverse：垂直方向，从下向上

2.flex-wrap：设置当一条主轴放不下所有项目时，多余的项目该如何换行

nowrap：默认，不换行，宽度不够缩小
wrap：换行，多余项目在下面
wrap-reverse：换行，多余项目在上面

3.flex-flow：flex-direction和flex-wrap简写

flex-flow:direction wrap;

4.justify-content：设置项目在主轴上的对齐方式

flex-start：以main start所在的位置对齐，默认值
flex-end：以main end所在的位置对齐
center：主轴中心点对齐
space-between：两端对齐
space-around：项目在主轴上的两边外边距相同

5.align-items：定义项目在交叉轴上如何对齐 --- 单根轴

flex-start：以cross start所在的位置对齐
flex-end：以cross end所在的位置对齐
center：交叉轴的中心点对齐
stretch：设置项目的大小(height/width)为交叉轴的长度,默认值 -- height/width设置为空或为auto
baseline：以项目中第一行文字的baseline对齐

6.align-content：定义多根轴线时项目在交叉轴上对齐方式 --- 多根轴

flex-start：以cross start所在的位置对齐
flex-end：以cross end所在的位置对齐
center：交叉轴的中心点对齐
space-between：两端对齐
space-around：在交叉轴上的两边外边距相同，等同于align-items中的center效果
stretch：设置项目的大小为平均分配交叉轴的长度

三、项目属性

1.order：设置项目的排列顺序，值越小越靠前，默认为0

2.flex-grow：设置有剩余空间时项目的放大比例，默认为0

3.flex-shrink：设置剩余空间不足时项目的缩小比例，默认为1，即剩余空间不足，项目缩小以适应容器

4.flex-basis：设置项目的主轴空间，默认为auto，即项目的实际大小

5.flex：是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto -- 推荐使用

flex:grow shrink basis;
快捷值：auto:1 1 auto
       none:0 0 auto

6.align-self：设置单个项目在交叉轴上的对齐方式，可以覆盖align-items,值与align-items一样，多了一个auto(表示继承父)