关于Flex布局

前言

• Flex布局（全称：Flexible Box）

  也名为弹性布局
  用于布置一些特殊的、不好实现的布局、为盒状模型提供强大的灵活性
  常规的布局都比较依赖display/position/float这三个属性，但有时对于复杂的布局的时候不好实现
  在属性中标明display: flex;或者是行内标签标明display: inline-flex;
  需要注意的是：设置为flex布局之后float、clear、vertical-align属性会失效

  • 一些特性

    他的所有子元素会自动成为这个标明了flex容器的成员（但是仅限于子元素，孙子元素不会变成他的成员）

• 前言总结：总的来说，flex是用来对元素进行操作的，各种排序，居中等不好实现的功能
• 具体可以参考这个网站：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

语法

• flex因为是css的一个附加的东西，语法也比较少，但是使用flex需要在这个标签中定义display:flex才能使用
• 并且设定了这个属性的标签下的所有子元素都会变成这个标签的容器成员，称为Flex项目（flex item）

  flex-direcion：决定了项目的排列方向
  flex-wrap：当所有项目都在同一行的时候，这个属性决定了排列不下的时候如何换行
  flex-flow：flex-direction和flex-wrap的简写
  justify-content：决定了项目的横向对齐方式
  align-items：决定了项目的纵向对齐方式
  align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。