/*
 * @Description: 12栅格系统，有注释版本
 * @Author: YoungWind
 * @Date: 2020-10-25 12:38:12
 * @LastEditTime: 2020-10-25 12:38:54
 * @LastEditors: YoungWind
 * @FilePath: \Covid2019Visualization\css\grid - 副本.css
 */
.container {
	width: 1226px;
	margin-right: auto;
	margin-left: auto;
}

.container-fluid {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

/**
 * 十二栅格布局系统
 */

/*容器*/
.row {
	margin: 0 -15px;
	display: flex;
	flex-wrap: wrap;

	/* 
    display: flex;
    1. Flexible Box 弹性布局
    2. Flex 布局以后，当前元素被称为Flex容器
    3. 子元素的float、clear和vertical-align属性将失效
    4. Flex容器的所有子元素自动成为容器成员
    5. 容器默认情况下，项目都排在轴线上。但可以通过flex-wrap定义换行方式。
    6. 容器默认情况下，项目都按从左到右的顺序排在轴线上，但可以通过flex-direction定义排列方式。
    7. 容器此外还有justify-content、align-content、align-items、flex-flow属性可以设置。
  */

	/*
    flex-wrap: wrap;
    1. flex-wrap属性定义，如果一条轴线排不下，如何换行。
    2. flex-wrap: nowrap（默认不换行） | wrap（换行） | wrap-reverse（逆序换行，第一行在最下方）;
  */

	/*
    Flex容器的属性有：
    1.flex-direction
    2.flex-wrap
    3.flex-flow
    4.justify-content
    5.align-items
    6.align-content
  */
}

/*flex可以设置元素在main轴与cross轴的排列方向*/
.flex-row {
	/*主轴为水平方向，从左到右。（默认值）*/
	flex-direction: row;
}

.flex-column {
	/*主轴为水平方向，从右到左。*/
	flex-direction: column;
}

.flex-row-reverse {
	/*主轴为垂直方向，自顶向下*/
	flex-direction: row-reverse;
}

.flex-column-reverse {
	/*主轴为垂直方向，自底向上*/
	flex-direction: column-reverse;
}

.align-items-center {
	align-items: center;
}

/*
  flex容器下的每一个元素有6个属性可以设置
  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-self
*/

.col {
	flex-basis: 0;
	flex-grow: 1;
	max-width: 100%;
}

.col-auto {
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
}

.col-1 {
	flex-basis: 8.3333333%;
	max-width: 8.3333333%;
	/*flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间,它的默认值为auto，即项目的本来大小*/
}

.col-2 {
	flex-basis: 16.666667%;
	max-width: 16.666667%;
}

.col-3 {
	flex-basis: 25%;
	max-width: 25%;
}

.col-4 {
	flex-basis: 33.333333%;
	max-width: 33.333333%;
}

.col-5 {
	flex-basis: 41.666667%;
	max-width: 41.666667%;
}

.col-6 {
	flex-basis: 50%;
	max-width: 50%;
}

.col-7 {
	flex-basis: 58.333333%;
	max-width: 58.333333%;
}

.col-8 {
	flex-basis: 66.666667%;
	max-width: 66.666667%;
}

.col-9 {
	flex-basis: 75%;
	max-width: 75%;
}

.col-10 {
	flex-basis: 83.333333%;
	max-width: 83.333333%;
}

.col-11 {
	flex-basis: 91.666667%;
	max-width: 91.666667%;
}

.col-12 {
	flex-basis: 100%;
	max-width: 100%;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto {
	padding-right: 15px;
	padding-left: 15px;
	position: relative;
}

/*flex功能强大，但存在兼容性问题，如果要兼容ie8等浏览器，我们还可以使用float来实现栅格系统，就像这样*/
/* .row {
  float: left;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  float: left;
}

.col-1 {
  width: 8.3333333%;
  max-width: 8.3333333%;
}

.col-2 {
  width: 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  width: 25%;
  max-width: 25%;
}

.col-4 {
  width: 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  width: 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  width: 50%;
  max-width: 50%;
}

.col-7 {
  width: 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  width: 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  width: 75%;
  max-width: 75%;
}

.col-10 {
  width: 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  width: 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  width: 100%;
  max-width: 100%;
} */