![](https://i-blog.csdnimg.cn/blog_migrate/c09390ffee83b2305f6fd9c17d8ba337.png)
以前的传统布局,依赖盒装模型。即 display + position + float 属性。但是对于比较特殊的布局就不太容易实现,例如:垂直居中。下面主要介绍flex的基本语法,后续还有二期介绍Flex的写法。
一、什么是Flex布局?
Flex布局个人理解为弹性盒子,为盒装模型带来了很大的灵活性,方便开发人员。
Flex布局基本使用如下:
.container{
display:flex;
}
行内元素的使用:
.container{
display:inline-flex;
}
针对WebKit内核的浏览器(Chrome就是该内核的浏览器之一),要加上-webkit的前缀
.container{
display:flex;
display:-webkit-flex;
}