CSS3弹性盒子属性及其取值

属性	描述	取值
display	指定HTML元素盒子类型	flex inline-flex
flex-direction	指定弹性容器中子元素的排列方式	row：横向从左到右排列(左对齐)，默认的排列方式 row-reverse：反转横向排列(右对齐，从后往前排) column：纵向排列 column：反转纵向排列，从后往前排，最后一项                   排在最上面
justify-content	设置弹性盒子元素在主轴(横轴)方向上的对齐方式	flex-start：弹性项目向行头紧挨着填充。这是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。 flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在改行的main-end边线，而后续弹性项依次平齐摆放。 center：弹性项目居中紧挨着填充。(如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出)。 space-between：弹性项目平均分布在改行上，如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在改行上，相邻项目的间隔相等。 space-around：弹性项目平局分布在改行上，两边留有一半的空间。如果剩余时间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿改行分布，且彼此间隔相等，同时首尾两边和弹性容器之间留有一半的间隔。
align-items	设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式	flex-start：弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住改行的侧轴起始边界。即对齐于顶端 flex-end：弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住改行的侧轴结束边界。即对齐于低端 center：弹性盒子元素在改行的侧轴(纵轴)上居中位置。 baseline：如果弹性盒子元素行内轴与侧轴为同一条，则该值与“flex-start”等效。其他情况下，该值将于基线对齐 stretch：如果指定侧轴大小的属性为“auto”，则其值会使项目的边距和的尺寸尽可能接近所在行的尺寸。
flex-wrap	用于指定弹性盒子的子元素的换行方式	nowrap：默认，弹性容器为单行。该情况下弹性子项可能会溢出容器 wrap：弹性容器为多行。该情况下子项溢出的部分会被放置到新行，子项内部会发生断行 wrap-reverse：反转wrap排列
align-content	用于修改flex-wrap属性的行为。类似于align-items，但它不是设置弹性子元素的对齐，而是设置各个行的对齐	stretch：默认，各行将会伸展以占用剩余的空间 flex-srart：各行向弹性盒容器的起始位置堆叠 flex-end：各行向弹性盒容器的结束位置堆叠 center：各行向弹性盒容器的中间位置堆叠 space-between：各行在弹性盒容器中平均分布 space-around：各行在弹性盒容器中平均分布，两段保留元素与子元素之间间距大小的一半
order	设置弹性盒子的子元素的排列顺序	<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值
margin	对齐	auto：是弹性子元素在弹性容器的量上轴方向都完全居中
align-self	在弹性子元素上使用。覆盖容器的align-items属性	如果'align-self'的值为‘auto’，则其计算为元素的父元素的‘align-items’值，如果其没有父元素，则计算值为'stretch' flex-start：弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住改行的侧轴起始边界 flex-end：弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住改行的侧轴结束边界 center：弹性盒子元素在改行的侧轴(纵轴)上居中放置。 baseline：如果弹性盒子元素的行内轴与侧轴为同一条，则该值与‘flex-start’等效。其他情况下，该值将于基线对齐。 stretch：如果指定侧轴大小的属性值为‘auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸
flex	设置弹性盒子的子元素如何分配空间，该属性是是flex-grow、flex-shrink、flex-basis三属性的简写总和。	flex-grow：定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同的放大比例。 flex-shrink：定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同的放大比例。 flex-basis：表示项目在主轴上占据的空间，默认值为auto。