弹性盒子由弹性容器(Flex container，也称flex容器)和弹性子元素(Flex item，也称flex项目)组成。

通常，CSS盒子的布局是基于块和内联文本的流式布局，而弹性布局是基于弹性盒子的轴布局。下图1是flexbox规范中的轴示意图： 图1：

flex项目就是沿着main axis（从main-start到main-end的方向）进行排列的，或沿着cross axis（从cross-start到cross-end方向）排列，具体沿着哪个方向排列则要看flex容器的flex-direction属性的取值情况。

1、定义flex容器-display

通过定义元素的display属性来定义一个弹性容器：

.container{    display: flex | inline-flex;}复制代码

flex容器包含一个及以上的flex项目（子元素），默认情况下，flex项目在flex容器中一行显示。

.container{		display: flex;		flex-direction: row;		height: 100px;		width: 500px;		margin-left: 50px;		margin-top: 50px;		background: #f1f1f1;	}	.left, .right{		width: 100px;		height: 100px;		background: #ccc;	}	.main{		width: 300px;	}	.test{		display: inline-block;		height: 100px;		background: red;		margin-left: 50px;	}		
    
	    
     
      left
     
		
     
      main
     
		
     
      right
     
	
    
	test复制代码

.container{		display: inline-flex;		... ...	}复制代码

注：

• 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
• flex容器（display: flex;）与块级元素不同，有些适用于块级元素的特性并适用于flex容器，例如：多列组中所有column-*属性、float、clear属性和vertical-align属性在Flex容器上没有作用。

2、flex-direction

指定弹性盒子的main|cross-start从哪个位置开始（上下左右），即指定flex项目开始排列的方向。

flex-direction: row | row-reverse | column | column-reverse复制代码

• row: 默认值，从左到右；
• row-reverse：和row相反，从右到左；
• column：从上到下；
• column-reverse：和column相反，从下到上。

额外属性-direction

指定文本的书写方向。

direction: ltr | rtl复制代码

• ltr: 默认值，left to right，表示从左到右的书写方向；
• rtl：right to left，表示从右到左的书写方向。

注：flex-direction的效果受到direction属性的影响，如果flex容器的祖先元素设置了direction属性，则flex容器首先遵从direction的影响，再应用flex-direction的属性的效果。

body{		direction: rtl;	}	.container{		display: flex;		flex-direction: row;		...	}    
    
	
     
      left
     
	
     
      main
     
	
     
      right
     
    
    
复制代码

.container{		display: flex;		flex-direction: row-reverse;		...	}复制代码

参考资料

1、

2、