Flex弹性布局

Flex布局简介

flex（flexible box）布局操作方便，布局极为简单，在移动端应用广泛，IE11+，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

• 当给一个元素设为flex布局时，子元素的float、clear和vertical-align属性将失效
• 采用了flex布局的元素称为容器，它的所有子元素称为项目

常见的添加到容器的属性

属性	描述
flex-direction	设置主轴方向
justify-content	设置主轴上子元素的排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上子元素的排列方式（多行）
align-items	设置侧轴上子元素的排列方式（单行）
flex-flow	复合属性，相当于同时设置 了flex-direction和flex-wrap

设置主轴方向flex-deriction

属性	描述
row	从左到右（默认值）
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
</div>

div {
   
	display