Flex布局

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。