Flex布局
- Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box {
display: flex;
}
行内元素也可以使用Flex布局。
.box {
display: inline-flex;
}
- 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
- 采用Flex布局的元素，称为Flex容器，它的所有子元素自动成为容器成员。可分别设置容器的属性和子元素的属性。
- 容器默认存在两根轴：水平的主轴和垂直的交叉轴。子元素默认沿主轴排列。
容器的属性
- flex-direction属性
/*有4个值*/
flex-direction: row; /*默认，主轴为水平方向，起点在左端。*/
flex-direction: row-reverse; /*主轴为水平方向，起点在右端。*/
flex-direction: column; /*主轴为垂直方向，起点在上沿。*/
flex-direction: column-reverse; /*主轴为垂直方向，起点在下沿。*/
- flex-wrap属性
默认情况下，子元素都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
/*有3个值*/
flex-wrap: nowrap; /*默认,不换行*/
flex-wrap: wrap; /*换行，第一行在上方。*/
flex-wrap: wrap-reverse; /*换行，第一行在下面*/
- flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: row nowrap;
flex-flow: row wrap;
flex-flow: row-reverse wrap;
flex-flow: row wrap-reverse;
- justify-content属性
justify-content属性定义了子元素在主轴上的对齐方式。
/*有5个值，具体的对齐方式与主轴的方向有关，假设主轴为从左到右。*/
justify-content: flex-start; /*默认，左对齐。*/
justify-content: flex-end;/*右对齐*/
justify-content: center;/*居中*/
justify-content: space-between; /*两端对齐，子元素之间的间隔相等*/
justify-content: space-around;/*每个子元素两侧的间隔相等，所以子元素之间的见那个比子元素与边框的间隔大一倍。*/
- align-items属性
align-items属性定义项目在交叉轴上如何对齐。
/*有5个值，具体的对齐方式与交叉轴的方向有关，假设交叉轴为从上到下。*/
align-items: flex-start; /*交叉轴的起点对齐。*/
align-items: flex-end;/*交叉轴的终点对齐*/
align-items: center;/*交叉轴的中点对齐*/
align-items: baseline; /*子元素的第一行文字的基线对齐*/
align-items: stretch;/*默认，如果子元素未设置高度或设为auto，将占满整个容器的高度。*/
- align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
/*有6个值*/
align-content: flex-start; /*与交叉轴的起点对齐。*/
align-content: flex-end; /*与交叉轴的终点对齐。*/
align-content: center; /*与交叉轴的中点对齐。*/
align-content: space-between; /*与交叉轴两端对齐，轴线之间的间隔平均分布。*/
align-content: space-around; /*每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。*/
align-content: stretch /*默认，轴线占满整个交叉轴。*/
子元素的属性
- order属性
order属性定义子元素的排列顺序。数值越小，排列越靠前，默认为0。
.box {
order: -1; /*-1 可改为任意数值，根据数值大小排序,默认值为0*/
}
- flex-grow属性
flex-grow属性定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大。
.box {
flex-grow: 1;/*1可改为任意数值，子元素根据数值大小占据剩余空间。*/
}
- flex-shrink属性
flex-shrink属性定义了子元素的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.box {
flex-shrink: 1;
/*如果所有子元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小；
如果一个子元素的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小；
负值对该属性无效。*/
}
- flex-basis属性
flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即子元素的本来大小。
.box {
flex-basis: <length> | auto; /* default auto */
}
- flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.box {
flex: auto;
flex: 1 1 0;
flex: none;
flex: 0 0 auto;
}
- align-self属性
align-self属性允许单个子元素有与其他子元素不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
classList的另一个方法toggle
if (menu.classList.contains('active')) {
menu.classList.remove('active');
} else {
menu.classList.add('active');
}
//相当于
menu.classList.toggle('active');
git出现的错误
image.png
- 出现这个错误是因为远程代码有更新，解决方法：
1.先git pull；
2.再git push。
