Flex弹性布局

 http://flexboxfroggy.com/ （大佬写的练习网站，以做游戏的形式生动形象地教会你如何使用Flex布局）

Flex是FlexibleBox的缩写，翻译过来就是“弹性盒”。

任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。值得注意的是，设为Flex布局后，其子元素的float、clear、vertical-align属性将会失效。

采用Flex布局的元素，称为Flex容器（flexcontainer），简称“容器”。它的子元素自动成为容器成员，称为Flex项目（flexitem），简称“项目”。

接下来介绍相关属性

• justify-content：沿主轴对齐Flex项目。
  • flex-start：项目与容器的左侧对齐。
  • flex-end：项目与容器的右侧对齐。
  • center：项目在容器的中心对齐。
  • space-between：项目以相等的间距显示。（下图一）
  • space-around：项目以相等的间距显示。（下图二）

• align-items：沿交叉轴对齐Flex项目。
  • flex-start：项目与容器顶部对齐。
  • flex-end：项目与容器底部对齐。
  • center：项目在容器的垂直中心对齐。
  • baseline：项目显示在容器的基线处。
  • stretch：项目被拉伸以适合容器。

结合justify-content和align-items可以实现垂直居中

.div {
    display: flex;
    justify-content:center;
    align-items:center
}

• flex-direction：定义主轴的方向 
  • row：项目的放置方向与文本方向相同。
  • row-reverse：项目与文本方向相反放置。
  • column：项目从上到下放置。
  • column-reverse：项目从下到上放置。

将方向设置为反转的行或列时，开始和结束也会反转（flex-end、flex-start；align-end、align-start）

主轴方向默认为行（row），当设置为列（column）时，表现形式上，原主轴（垂直）变为水平，原交叉轴（水平）变垂直。

• order ：指定弹性项目的顺序

        有时颠倒容器的行或列顺序是不够的。在这些情况下，可以将该order属性应用于单个项目。默认情况下，指定的项目的位置值为 0，可以使用order属性将其设置为正整数或负整数值来达到替换位置的目的。 

• align-self：沿交叉轴对齐项目，在单个项目中覆盖容器align-items的值

        可以应用于单个项目的另一个属性是align-self。此属性接受的值与align-items相同。

• flex-wrap：指定Flex项目是强制在单行上还是可以在多行上换行。
  • nowrap：每个项目都放在一行。
  • wrap：项目太挤就自动换行。
  • wrap-reverse：项目反向换行。

     

    

• flex-flow：flex-direction和flex-wrap经常一起使用，flex-flow创建了速记属性来组合它们。此属性接受由空格分隔的两个属性的值。例如，可以使用flex-flow: row wrap来设置。
• align-content：定义了多根轴线的对齐方式。当横轴上有额外空间时，设置多条轴线彼此间隔。
  • flex-start：轴线在容器的顶部。
  • flex-end：轴线在容器底部。
  • center：轴线在容器的垂直中心。
  • space-between: 轴线以相等的间距显示行。
  • space-around：轴线以等间距显示。
  • stretch：轴线被拉伸以适合容器。