作者：sunshine小小倩转发链接：https://juejin.im/post/599970f4518825243a78b9d5前言温馨提示：本文较长，图片较多，本来是想写一篇 CSS 布局方式的，但是奈何 CSS 布局方式种类太多并且实现方法太多，所以本文主要是介绍 flex 布局和 grid 布局，以及 CSS 常见的居中方式和两种经典的布局方式“圣杯布局”和“双飞翼布局”。想到哪写到哪，
大家好，我是三木。这篇文章，替大家汇总了css的布局方式，在每个布局的结尾附上了我认为比较好的文章链接，不仅仅可以当作学习资料，也可以当作方法的查询手册，以后开发的时候忘记了某个属性就来查查。看完推荐的文章保准解决你 99% 的css布局问题
作者：张鑫旭
1. 简介1.1 什么是CSS布局？
一、flex弹性盒模型元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性.
前言在现代网页设计中，布局是一个至关重要的环节，在过去的一段时间里，页面的布局还都是通过table
一、Flex布局涉及的基本概念容器(container)：display被设置为flex、inline-flex的元素被称作为容器。
flex弹性布局：(1)其容器能调节子节点宽或高，以适应不同屏幕。(2)可以将一个元素当做容器，其子元素自动成为子容器。(3)水平主轴和垂直交叉轴。
1、什么是弹性布局Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
Flex 布局基础1. Flex 容器设置