#CSS

1{
2    display: flex;
3    justify-content: center;
4    align-items: center
5}

1.parent{
2    display: flex;
3    /*
4    * justify-content用于定义如何沿着主轴方向排列子容器
5    * 可选值：
6    * flex-start：起始端对齐
7    * flex-end：末尾段对齐
8    * center：居中对齐
9    * space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半
10    * space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切
11    */
12    justify-content: flex-start; 
13    /*
14    * align-items用于定义如何沿着交叉轴方向分配子容器的间距
15    * 可选值：
16    * flex-start：起始端对齐
17    * flex-end：末尾段对齐
18    * center：居中对齐
19    * baseline：基线对齐，这里的baseline默认是指首行文字，即first baseline，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线
20    * stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。
21    */
22    align-items: flex-start;
23}

1.children{
2    /*设置为flex之后，将自动填充剩余空间，伸缩比例由 flex 属性确定*/
3    display: flex;
4    /*
5    * flex的值可以是无单位数字（如：1, 2, 3），也可是有单位数字（如：15px，30px，60px），或 none 关键字。
6    * flex 是多个属性的缩写，允许 1 - 3 个值连用
7    */
8    flex: 1;
9    /*
10    * 单独设置子容器如何沿交叉轴排列
11    * 可选值与父容器align-items相同
12    */
13    align-self：flex-start;
14}

1.parent{
2    display: flex;
3    justify-content: flex-start; 
4    align-items: flex-start;
5    /*
6    * 可选值：
7    * row：向右
8    * column：向下
9    * row-reverse：向左
10    * column-reverse: 向上
11    */
12    flex-direction: row;
13}

1.parent{
2    display: flex;
3    justify-content: flex-start; 
4    align-items: flex-start;
5    flex-direction: row;
6    /*
7    * 设置换行方式，决定子容器是否换行排列，不但可以顺序换行而且支持逆序换行。
8    * 可选值：
9    * nowrap：不换行
10    * wrap：换行
11    * wrap-reverse：逆序换行
12    */
13    flex-wrap: nowrap;
14    /*
15    * 多行沿交叉轴对齐,当子容器多行排列时，设置行与行之间的对齐方式。
16    */
17    align-content：flex-start;
18}