本文主要是介绍css之前端5种布局方式之table布局、float布局、absolute布局、flexbox布局、grid布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.表格布局（不推荐）
父级容器为display：table 表格
子级容器为display：table-cell 一个单元格
特点：在没有特别设置的情况下，子级是自动平分宽度并填满父级的。
table布局的优缺点：
缺点
1.table所占的字节比起其他的html标签来说更多，并且占用服务器资源更多，下载更慢。
2.table布局一旦形成，后期就很难用css改变。
3.阻挡浏览器渲染引擎的渲染顺序，延迟页面生成速度。
4.不利于搜索引擎抓取信息，影响网站排名。
优点：
兼容性高
简单
float布局
使元素浮动，脱离了文档流但不脱离文本流
补充：文档流 英文为normal flow 不知道为什么被翻译成文档。。。 脱离文档流的意思为不遵循原先的从左到右从上到下的规则，不脱离文本流的意思是文本依然会环绕在这个浮动的周围。
通俗一点可以理解为float完成的就是图文环绕的效果
对自身来说，float可以形成块。也就是可以对一些行内元素进行宽高之类的处理。
但是float布局不够灵活，且会脱离文档流
其他两个就省略了，重点解析一下
flexbox布局
传统布局 flex弹性布局
兼容性高 操作方便，布局简单，应用广泛
布局繁琐 PC端支持较差
局限，不能很好的在移动端布局 IE11或更低版本不支持或部分支持
任何一个容器都可以指定为flex布局
当父级为flex布局时，子元素的浮动属性就失效了，flex是目前最好的布局。
flex容器
给父级做flex属性，控制的是flex-item的位置和排列。
父级主要的几个属性：
flex-direction：
flex里：主轴和侧轴 其实就是 x和y轴 元素根据主轴来排列 主轴可以设为y或x
flex-direction:row;flex-direction:column;
例： .contain{
display: flex;
flex-direction: column;
}
justify-content：
设置在主轴上的排列方式
例： justify-content: space-between;
flex-wrap：设置子元素换行。
因为默认情况是不换行的，都在主轴排列
例：flex-wrap: wrap;
align-items：
设置水平垂直居中 center
设置高度拉升，去掉子项的高度。 stretch
align-content：
侧轴上可控制对齐方式，当有换行之后才有效。
flex-wrap: wrap; align-content:space-between; 上下沿贴着。
总结：单行找align-items，多行找align-content
flex-flow ：flex-diretion和flex-wrap的符合属性。
例：flex-flow：row，wrap x为主轴，自动换行。
子项常见属性
1.flex属性，可用来表示占多少份
直接flex：数字 数字代表占的份数
2.align-self属性，控制子项在侧轴的排列方式
例：align-self：flex-end
3.order属性
例：order：-1 为向前提一个位置。
这篇关于css之前端5种布局方式之table布局、float布局、absolute布局、flexbox布局、grid布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
