最为一个忠实于float跟position的人，确实很少去接触flex，但如果抛开兼容性，猛然发现flex真的好用。
那首先谈谈什么是flex布局？从英文来看，Flexible Box，大多数翻译为弹性布局，语法如下：
元素选择器 { display: flex; }display属性的值耶！那么跟盒模型有什么关系呢？（对于其他元素类型，如inline，block大家可以自行百度）下面通过一张图来说一下：
（备注：此图从http://www.runoob.com/w3cnote/flex-grammar.html这里引用过来的）
- 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为。
- 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为cross start。
display: flexflex 容器（flex container）。- flex 项（flex item
<article>
flex-direction flex-wrap flex-flow justify-content align-items align-content
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compaible" content="IE=Edge"> <title>Flexbox align 0 ― starting code</title> </head> <body> <div> <button>1</button> <button>2</button> <button>3</button> <button>4</button> </div> </body> </html>
body { width: 100%; max-width: 1080px; margin: 20px auto; } button { font-size: 16px; line-height: 1.5; width: 20%; } div { height: 100px; border: 1px solid black; } 
div { display: flex; align-items: center; }效果如下：
display: flex
文章来源: Flex-弹性布局