flex
box属性
- flex-direction【决定item排列方向】
- flex-wrap【换行】
- flex-flow【前两个的简写】
- justify-content【在主轴对齐方式】
- align-items【在交叉轴对齐方式】
- align-content
item属性
- order【决定排列先后】
- flex-grow【放大比例，默认为0，即如果存在剩余空间，也不放大】
- flex-shrink【缩小比例，默认为1，即如果空间不足，该项目将缩小。】
- flex-basis【项目占据的主轴空间】
- flex【前三个的简写】
- align-self【可覆盖box的align-items属性】
应用
-
居中
.box{
justify-content: center;
align-items: center;
}*/ -
画骰子
-
2点
.item{
border-radius: 50%;
background-color: black;
width: 25px;
height: 25px;
}
.item2{
align-self: flex-end;
} -
3点
.item:nth-child(2) {
align-self: center;
}.item:nth-child(3) {
align-self: flex-end;
}
-
网友评论