弹性盒子由弹性容器(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;
	}
	
	<div class="container">
	    <div class="left">left</div>
		<div class="main">main</div>
		<div class="right">right</div>
	</div>
	<span class="test">test</span>

        .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;
		...
	}

    <div class="container">
	<div class="left">left</div>
	<div class="main">main</div>
	<div class="right">right</div>
    </div>

        .container{
		display: flex;
		flex-direction: row-reverse;
		...
	}

参考资料

1、一个完整的Flexbox指南
2、CSS3 弹性盒子(Flex Box)

Flexbox学习笔记-flex容器属性

1、定义flex容器-display

2、flex-direction

额外属性-direction

参考资料