Flex布局教程（一）

前言

对于Flex布局，在之前我用的最多的无非是justify-content:center和align-items:center这两个属性，对其他的属性知之甚少，最近也看了不少关于Flex布局的博文，自己整理之后，决定写下这篇博客，以便之后学习。

Flex布局是什么

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定Flex布局：

.cloud-box {
   
	display: flex;
}

也可以将行内元素作为一个容器：

.cloud-box {
   
	display: inline-flex;
}

修改父元素display:flex，div自动就排列成了一行，没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float。

注：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

Flex属性主要由容器属性和项目属性构成，下面会分别讲到这两个属性。