前端基础知识微回顾-flex布局

[Goofy007]

flex布局的几个基础常用属性

flex-direction: 主轴的方向（纵向或横向）
justify-content: 主轴的对齐方式（开始，剧中，两边对齐）
align-items： 交叉轴的对齐方式（和主轴相对的）
flex-wrap 是否换行
align-self：子元素在交叉轴的对齐方式

examples： flex画骰子

HTML部分代码
<div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

CSS部分代码
`

.box {
width: 200px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
display: flex;
justify-content: space-between;
}

.item {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #666;
}

/* .item:nth-child(2) {
    align-self: center;
} */

.item:nth-child(2) {
   align-self: center;
}

.item:nth-child(3) {
    align-self: flex-end;
}

`

效果图