【CSS3】FLEX弹性布局

参考博客：CSS3新特性：flex
flex是flexible box的缩写，意思是弹性布局。
不过目前浏览器支持不是很好，IE11开始才支持。
各个浏览器的支持情况：

1.flex的盒子

1. 紫色的是flex container，顾名思义就是最大的flex盒子，也就是父元素，css为display: flex。
2. 盒子里有一个及以上的flex item，作为子元素，他们是盒子内的文档流元素，脱离文档流的元素和非子元素都不能算是flex item。
3. 盒子里面的子元素横向排列的方向称为main axis。
4. 纵向排列的方向称之为cross axis。

2. 判断哪些是有效的flex item

主要是两点：【文档流】【子元素】

• float元素是文档流中的子元素，因此算是 flex item
• position: absolute脱离了文档流，不能算是 flex item
• grandson元素是孙元素，也不能算是 flex item

3. flex弹性布局的特性

主要是三大特性：排列方向、弹性、对齐

• 排列方向
  和排列方向有关的属性主要有下面几个flex-direction(弹性方向)、flex-wrap(弹性的换行)、flex-flow(flex-direction和flex-wrap的复合属性)、order(顺序)。
  a. flex-direction（默认方向是row）

  flex-direction: row|row-reverse|column|column-reverse; 
  

  
  b. flex-wrap（默认是nowrap）

  flex-wrap: nowrap|wrap|wrap-reverse; 
  

  
  c. flex-flow（默认是row nowrap）

flex-flow: flex-direction||flex-wrap; 

d. order（默认值为0，值为整数，可为负数）

order: number;

order: 1的元素大于order: 0的两个元素，于是位置就对换了。

• 弹性
  和弹性有关的属性有：flex-basis（设置flex-item的初始宽高）、flex-grow、flex-shrink。
  a. flex-basis

  flex-basis: number| auto| initial(默认)| inherit;
  

  如果设置为默认值的话，那么如果是row向排列，那么宽度就是主轴main axis的长度了，如果是column向排列，那么高度就是辅轴cross axis的长度。
  b. flex-grow，用来设置弹性盒子的 能分配到的剩余空间 的扩展比率。

  flex-grow: number;
  

  
  

  c. flex-shrink，用来设置弹性盒子的 能分配到的剩余空间 的收缩比率

  flex-shrink: number;
  

  
  d. flex的复合语法

  flex: flex-grow|| flex-shrink || flex-basis;
  

【建议使用复合写法，更加的便捷】

• 对齐
  和对齐有关的属性：justify-content（设置主轴的对齐方式）、align-items（设置辅轴的对齐方式）、align-self、align-content。
  a. justify-content

  justify-content: flex-start| flex-end| center| space-between| space-around;
  

  
  

  b. align-items

  align-items: flex-start| flex-end| center| baseline| stretch;
  

  
  

  或者用这张图理解，

  
  
  
  

  c. align-self（设置单个的flex item在cross axis方向上的对齐）

  align-self: auto| flex-start| flex-end| baseline| stretch;
  

  效果跟align-items的一样，就不放图了。
  d. align-content（设置cross-axis方向上行（多行）的对齐）

  align-content: auto| flex-start| flex-end| center| space-between| space-around| stretch;