从了解到使用只需5min

文章目录
Flex简介
其他布局
table布局
float布局
absolute布局
grid布局
Flex布局
容器属性
元素结构
使用flex布局
改变主轴方向 - flex-direction属性
改变换行方式 - flex-wrap属性
flex-flow属性（flex-directive和flex-wrap简写）
主轴对齐方式 - justify-content
交叉轴对齐方式 - align-items
多根轴线对齐方式 - align-content
子元素属性
子元素属性 – order
子元素属性 – flex-grow
子元素属性 – flex-shrink
子元素属性 – flex-basis
子元素属性 – flex
子元素属性 – align-self
最后
Flex简介
页面布局的传统解决方案是基于盒状模型，使用 display属性+position属性+float属性，但对于特殊布局非常不方便。直到2009年，W3C提出了解决方案-----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，意味着，现在可以很安全的使用这项功能。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

其他布局
table布局
在实际的项目开发过程中，不建议用table进行布局。

缺点：

table 比其他html标签占更多的字节。造成下载时间延迟，占用服务器更多的流量资源（代码冗余）
table 会阻挡浏览其渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待时间更久。
灵活性差，一旦设计确定，后期很难通过CSS让它展现新的面貌。
不利于搜索引擎抓取信息，直接影响到网站的排名
优点：

兼容性好
容易上手
float布局
float 属性定义元素在哪个方向浮动。

缺点：

脱离文档流，需要清除浮动，高度塌陷（float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素）。
优点：

兼容性好，比较简单。
absolute布局
relative属性：脱离文档流，但保留占位符，其偏移位置是相对于本身在正常文档流中时的位置

脱离文档流是说设置了relative属性之后，元素不在z-index:0;的正常文档流中，其z-index的值>0，但保留占位符，就是在正常文档流中位置保留着，后继元素不能占位，然后相对于本身正常位置进行偏移。

缺点：

脱离文档流，会导致后续元素全部脱离文档流，可用行差。

grid布局
Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，意味着它可以同时处理列和行