前言：
你知道flex弹性布局么？
我们先来了解它的概念：Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局（Webkit内核的浏览器，必须加上-webkit前缀）。
***注意，设为Flex布局以后，子元素的float、clear和vertical-align属性都会失效哦~~~
1容器&&项目定义
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
2父容器的属性及属性值
给父容器添加display:flex/inline-flex;属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>flex测试demo</title> 6 <style type="text/css"> 7 #main { 8 width: 600px; 9 height: 250px; 10 border: 4px solid saddlebrown; 11 display: flex; 12 } 13 #main > div { 14 width: 100px; 15 height: 100px; 16 text-align: center; 17 line-height: 100px; 18 font-size: 60px; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="main"> 24 <div style="background: salmon;">1</div> 25 <div style="background: hotpink;">2</div> 26 <div style="background: sandybrown;">3</div> 27 <div style="background: navajowhite;">4</div> 28 <div style="background: saddlebrown;">5</div> 29 <div style="background: skyblue;">6</div> 30 <div style="background: slateblue;">7</div> 31 <div style="background: palegreen;">8</div> 32 </div> 33 </body> 34 </html>