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

最新推荐文章于 2024-01-02 19:40:00 发布

Lich Howger

最新推荐文章于 2024-01-02 19:40:00 发布

阅读量165

点赞数

分类专栏： WebApp

本文链接：https://blog.csdn.net/qq_33781658/article/details/102694254

版权

WebApp 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Flexbox

当一个元素,比如div

display: flex的时候

就成为了一个flex容器

看看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/test.css">
</head>
<body>

<div class="div01">
    <div class="div02"></div>
    <div class="div02"></div>
    <div class="div02"></div>
    <div class="div02"></div>
</div>

</body>
</html>

然后是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;
}

Lich Howger

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
011-网页应用开发WebApplicationDevelopment（四）

Flexbox当一个元素,比如divdisplay: flex的时候就成为了一个flex容器看看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> &...
复制链接

扫一扫