011-网页应用开发WebApplicationDevelopment（四）

 

 

Flexbox

当一个元素,比如div

display: flex的时候

就成为了一个flex容器

看看代码

然后是CSS

.div01 {
    width: 500px;
    height: 500px;
    border: 2px solid red;
}

.div02 {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

然后我们来看看效果

 

 

 

 

然后我们修改一下CSS

把外面的div01改成,display: flex;

.div01 {
    width: 500px;
    height: 500px;
    border: 2px solid red;
    display: flex;
}

.div02 {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

然后再看看效果

 

内层的div02变成了横向排列

 

 

 

 

然后我们再试试

justify-content: center;属性

.div01 {
    width: 500px;
    height: 500px;
    border: 2px solid red;
    display: flex;
    justify-content: center;
}

.div02 {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

效果是

 

 

 

 

 

然后再来看看

space-around

space-between

space-evenly

三个有些许的不同

justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;

分别是

 

 

 

 

 

 

align-items

.div01 {
    width: 500px;
    height: 500px;
    border: 2px solid red;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.div02 {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

加上一个

align-items: center;

 

 

 

 

 

 

 

 

如果修改item

.div01 {
    width: 500px;
    height: 500px;
    border: 2px solid red;
    display: flex;
}

.div02 {
    flex-grow: 1;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}