Flex 介绍

1、 布局的传统解决方案

基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便[缺点: 垂直居中就不容易实现]

1.1 table布局

最早布局方式
实际解决：兼容ie8以下【等高】布局实现或者display: table-cell

1.2 float布局

比table布局要方便不少，但随之而来的带来了 “浮动高度塌陷”的问题：
如果浮动元素的父元素没有设定高度，当其子元素浮动后，父元素就因为内部没有子元素撑起从而高度变为0；
引申：网页元素一般分为 普通流，浮动流，定位流。其中普通流和浮动流在一个层级上，定位流>浮动流>普通流。 之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法，非常麻烦。

1.3 position布局

position需要计算每一个元素的位置，而且这个位置是定死的，略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。
position优点在于不像float那样会影响其他元素。 关键点：子绝父相。需要定位的元素用absolute绝对定位，其父元素用 relative相对定位。还有fixed固定定位，他是以window为父元素的定位。

1.4 Grid 网格【最新】

阮一峰-Grid 网格
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

2、Flex 概念: [请参阅]

注意:

• 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效；
• 设为 Flex 布局以后, 子元素不能出现absolute, fixed, 否则flex将失效。

阮一峰 Flex
阮一峰 Flex实例篇
Flex的性能

3、 容器属性[设置在flex同级元素]: flex-direction/flex-wrap/flex-flow/justify-content/align-items/align-content

4、 子级元素属性: order/flex-grow/flex-shrink/flex-basis/flex/align-self

注意: align-self将覆盖父级align-items属性

• 图片来源-菜鸟教程
  
• 图片来源-菜鸟教程
  

5、 布局 - 实例源码