Flex布局

一般的网页布局，都是盒模型布局，要想把行标签和块标签一排布局，一般都用display: inline-block、或者是浮动float。但是这两者对于一些特殊布局或者垂直居中很不方便。于是2009年的时候w3c提出了flex布局，也叫弹性布局，可以更简单的实现响应式和一些特殊布局。

image

现在的主流浏览器几乎都兼容了flex布局，连IE只要是10+的都兼容。手机的话更是安卓4.4以上，现在想找到4.4以下也很难了。IOS的话具体兼容到哪一个版本不知道，但是开发到现在还没遇见不兼容的，所以flex可以放心使用。要是有IE8等用户，我建议是给个提示去升级吧。

当一个块里面，你想所有东西都一行排列，只需要给这个块设置display: flex;那么里面的东西都会横向排列，而且行元素（p）、行内元素（span）等都会变成块元素，都可以设置宽高。

先说说横向的布局，当你使用了flex之后，align-items是控制上下方向的，center是上下居中、flex-end是下边对齐、flex-start是向上对齐。还有一个左右的属性justity-content,center左右居中、space-between靠两边，space-around会自动帮你左右两边留白。

image

当你定义了你需要的布局后，还可以自定义margin，这对于特殊的布局是很有简便的。

当然，有些时候我们需要自动填充，就是不确定个数，然后一直往下填充，就像淘宝天猫一样，商品的列表是自动填充的。这时候就需要设置flex-wrap: wrap;如果没有这个可换行的属性，你的内容不管定义了多少的宽度，还是会挤压在你的父容器里面，导致变形。

如果你需要的还是竖向的排列，又想用flex的上下居中或者左右布局，那么设置flex-direction: column，这时候就是竖向布局。注意的是，这时候的align-items就会变成左右的布局，justity-content就是上下的布局了。

image

项目开发中，flex布局一般就用这几个属性，只要写几个div或者ul li就很容易上手，尤其是对于APP，只要宽度百分比加flex布局，几乎就可以做到百分之90的自适应。

欢迎关注 Coding 个人笔记 公众号