弹性盒子由弹性容器(Flex container，也称flex容器)和弹性子元素(Flex item，也称flex项目)组成。
通常，CSS盒子的布局是基于块和内联文本的流式布局，而弹性布局是基于弹性盒子的轴布局。下图1是flexbox规范中的轴示意图：
图1：
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;
...
}
复制代码
