cursor

设置鼠标放上去后的形状

visability

设置是否可见

dsplay: flex

flex 模型

方向

flex-direction: column //设置为列布局

flex-direction: row    //设置为行布局

换行

flex-wrap: wrap

设置每项的宽度

flex: 200px;

flex 动态尺寸

如果一个div里有三个article，且已经设置了div的display: flex。这时三个arti是并排的，且宽度是相等的。

如果进行以下设置

article {

  flex: 1;

}

article:nth-of-type(3) {

  flex: 2;

}

则三个宽度比是1:1:2。

如果

article {

  flex: 1 200px;

}

article:nth-of-type(3) {

  flex: 2 200px;

}

则每个flex的宽度最小是200px

div {

  display: flex;

  align-items: center;

  justify-content: space-around;

}

align-items说的是div中的元素沿交叉线排列。

justify-content说的是沿主线排列。

在线试align-items的几个选项

align-items的几个选项分别是

justify-content的几个选项