先看看等分的布局方案
1. float
兼容性较好（IE 8以上）
**2. flex **
兼容性较差（flex属于css3）
兼容性：IE8及以上
3. table
兼容性：可以兼容 IE 8
1. table
利用 table 的特性——每列等宽
2. flex
3. float
伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。
CSS是前端基础技能之一，而CSS最重要的功能就是网站布局。CSS布局方式有很多，从远古时代的table（表格）布局-->float（浮动）布局-->position（定位）布局-->flex（弹性）布局-->grid（网格）布局（还未正式推出），下面咱们简单谈一谈各种布局的用法及其优缺点。
table布局就是将网站当做一个表单来做，这里不做展开，因为现在基本不这么用了。
float：浮动。float刚开始并不是为了用来网页布局，而是用来解决图文信息中图片与文本冲突的问题的。
如下图：
这种常见的图文效果，没有float之前是很难达到的。有了float之后只需要加一个float：left，轻松搞定。
‘咦，如果float可以处理图文的问题，那用来布局不也可以吗？’，后来有人用float试着用于网页布局，还真的可以。
网页中最常见的布局如下：
用float做
比table布局要方便不少，不过float随之而来的带来了 “浮动高度塌陷”的问题：
如果浮动元素的父元素没有设定高度，当其子元素浮动后，父元素就因为内部没有子元素撑起从而高度变为0；
引申：网页元素一般分为 普通流，浮动流，定位流。其中普通流和浮动流在一个层级上，定位流>浮动流>普通流。
之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法，非常麻烦。
position：定位；顾名思义，就是确定位置。position同样可以用做网页布局。
同样的效果
不过position需要计算每一个元素的位置，而且这个位置是定死的，略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。
关键点：子绝父相。需要定位的元素用absolute绝对定位，其父元素用 relative相对定位。还有fixed固定定位，他是以html为父元素的定位。
flex：弹性；弹性布局很好的解决了float和position的问题，非常好用。
使用方法：
在父元素使用 display:flex确定弹性作用的范围。
然后
justify-content：center（space-around，space-between等）；水平方向布局；
align-items:center(flex-start,flex-end等)垂直方向布局；
不过flex不兼容IE8及以下的浏览器。
大部分情况下flex布局已经能满足需要，不过flex只能用作一维布局，也就是说，flex一次只能作用于一条线。如果想要进行二维布局，必须翻转坐标二次弹性，这样会显得不够优雅，这时候grid（网格）布局就发展起来了。
grid布局用法和flex相似，但是作用于二维布局。
先在父元素使用 display:grid确定网格作用范围；
然后
grid-template-columns: 40px 50px auto 50px 40px（行）
grid-template-rows: 25% 100px auto（列）
等等属性，这里只简单介绍，大家了解有这个东西就行。
在现实工作用，以flex为主，position辅助已经足够应对所有问题。
什么是flex布局？
传统的布局方案是基于盒模型，依赖于display:block和float+position，但是对于一些特殊的布局来说就不是很方便，如在盒模型中垂直居中。
2009年W3C提出一种新的布局方案，flex弹性盒布局，目前兼容的浏览器有chrome opera IE Firefox Sifari
flex兼容浏览器版本
但是在未来flex布局将会成为布局的首选方案。
flex是flexinle BOX的缩写。意思是弹性布局，用来为盒模型提供最大的灵活性。 任何一个容器（标签）都可以指定为flex布局。用display:flex；
如果给容器设置flex的时候当前容器内子元素的float,clear,vericla-align都将会失效
flex的基本概念
容器默认存在两根轴：水平的主轴（main axis）和垂直交叉轴（cross axis）.主轴的开始位置（与边框的交叉点）叫做main start, 结束位置叫做main end 交叉轴的开始位置叫做cross start ,结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴叫做cross size.
如果给一个元素设置为flex后，这个元素就会作为子元素的flex容器。通过给容器设置属性来改变里面子元素的位置。
二
首先要给父元素添加display:flex；将父元素转化为弹性盒
2.用flex-direction来改变盒子里元素的位置
row 默认在一行内排列（从左向右）
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
column ：纵向排列。
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
3.内容对齐（justify-content）属性应用在 弹性容器 上，把弹性项沿着弹性容器的主轴线（main axis）对齐
justify-content：flex-start 默认，左对齐（图1）
justify-content:flex-end 右对齐（图2）
justify-content:center 居中对齐（图3）
justify-content:space-between 两端对齐，中间自动分配
justify-content:space-around 自动分配距离
主轴对齐方式
4.align-items（交叉轴对齐方式）
flex-start：顶端对齐
flex-end：底对齐
center：垂直居中对齐
baseline：项目内文本的底线对齐
stretch 默认值 项目的高度自适应容器（注：子元素不能设置高）
交叉轴对齐方式
5.flex-wrap
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
图1（nowrap）注意如果父元素盒设置宽度会自动缩子元素容器宽度
图2（wrap）
图3（warp-reverse）
容器单行或者多行方式
6、align-content（行与行之间对齐方式）
当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式，这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’>属性类似。 注：本属性在只有一行的伸缩容器上没有效果。
flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐，中间自动分配
space-around自动分配距离
