Flex布局（弹性盒子布局）

Flex模型

元素表现为 flex 框时，它们沿着两个轴来布局：

• **主轴（main axis）**是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
• **交叉轴（cross axis）**是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
• 设置了 display: flex 的父元素被称之为 flex 容器（flex container）。.container
• 在 flex 容器中的弹性盒子元素被称之为 flex 项（flex item）。.item

一、flex container属性

1. display
   给flex容器设置display属性

.container{
	display:flex	|	inline-flex
}

2. flex-direction
   设置主轴的方位和方向。

.container {
    flex-direction: row(default) | r