Flex写法系列-Flex布局之基本语法

以前的传统布局，依赖盒装模型。即 display + position + float 属性。但是对于比较特殊的布局就不太容易实现，例如：垂直居中。下面主要介绍flex的基本语法，后续还有二期介绍Flex的写法。

---

一、什么是Flex布局？

Flex布局个人理解为弹性盒子，为盒装模型带来了很大的灵活性，方便开发人员。

Flex布局基本使用如下：

.container{

display:flex;

}

行内元素的使用：

.container{

display:inline-flex;

}

针对WebKit内核的浏览器(Chrome就是该内核的浏览器之一)，要加上-webkit的前缀

.container{

display:flex;

display:-webkit-flex;

}

二、Flex布局的基本概念