flex-direction设置主轴，从而定义flex项目在flex容器中的放置方向。Flexbox是一种单向布局概念，将弹性项目视为主要在水平行或垂直列中布局。.container{flex-direction:行|行反转|栏目|column-reverse;}几个支持的属性：row（默认）：ltr中从左到右；在rtl中从右到左row-reverse：在ltr中从右到左；在rtlcolumn中从左到右：作用与row属性相同，但布局是从上到下column-reverse：与row-reverse相同，但从下到上增长宽度。它接受一个无单位的值作为标度。它指定项目应占用的弹性容器内的可用空间量。下图第一行，三个元素的flexitem的flex-grow都为1，所以平分了flex容器的剩余宽度。下图中第二行中间的flexitem的flex-grow属性为2，另外两个元素为1，所以宽高比为1:2:1。如果所有项目都将flex-grow设置为1，则剩余空间将平均分配给所有孩子。如果其中一个项目元素的值为2，则该项目将占用另一个项目的两倍空间（或者至少它会尝试）。justify-content此属性定义沿主轴的对齐方式。当一行中的所有flex项目都达到其最大大小时，它有助于分配剩余的额外可用空间。当项目溢出线时，它还对项目的对齐施加一些控制。flex-start（默认）：项目打包到flex-direction的开头。flex-end：项目被打包到flex-direction的末端。start：项目打包到writing-mode方向的开始。end：项目被打包到书写模式方向的末尾。left：项目被打包到容器的左边缘，除非这对flex-direction没有意义，它的行为就像开始。right：项目被打包到容器的右边缘，除非这对flex-direction没有意义，否则它表现得像end。center：项目沿行居中space-between：项目在行中均匀分布；第一个项目在开始行，最后一个项目在结束行请注意，从视觉上看，空间并不相等，因为所有项目的两侧都有相等的空间。第一个项目将在容器边缘有一个单位的空间，但下一个项目之间将有两个单位的空间，因为下一个项目有自己适用的间距。space-evenly：项目的分布使得任意两个项目之间的间距（以及到边缘的空间）相等。
