flex弹性盒子模型

21fanqie · 发表于 2024-7-27 21:58:53

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <style type="text/css">
    .box {
        background: blue;
        display: flex;
    }
    .box div {
        width: 200px;
        height: 200px;
    }
    .box1 {
        background: red;
    }
    .box2 {
        background: orange;
    }
    .box3 {
        background: green;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

21fanqie · 发表于 2024-7-27 22:03:37

justify-content属性，本属性定义了项目在主轴上的对齐方式。结合上一节的布局例子进行理解，属性值分别为：

justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start：交叉轴的起点对齐（即左对齐）

.box {
background: blue;
display: flex;
justify-content: flex-start;
}

复制代码

实现效果：

flex-end：右对齐

.box {
background: blue;
display: flex;
justify-content: flex-end;
}

复制代码

实现效果：

center：居中

.box {
background: blue;
display: flex;
justify-content: center;
}

复制代码

实现效果：

space-between：两端对齐，项目之间的间隔都相等。

.box {
background: blue;
display: flex;
justify-content: space-between;
}

复制代码

实现效果：

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

.box {
background: blue;
display: flex;
justify-content: space-around;
}

复制代码

实现效果：

21fanqie · 发表于 2024-7-27 22:11:15

align-items属性，本属性定义了项目在交叉轴上的对齐方式。属性值分别为：

align-items: flex-start | flex-end | center | baseline | stretch;
结合右侧编辑器中的布局以及下面的样式设置进行理解：

flex-start：默认值，上对齐

.box {
height: 700px;
background: blue;
display: flex;
align-items: flex-start;
}

复制代码

实现效果：

flex-end：交叉轴的终点对齐（下对齐）

.box {
height: 700px;
background: blue;
display: flex;
align-items: flex-end;
}

复制代码

实现效果：

center：交叉轴的中点对齐（上下居中对齐）

.box {
height: 700px;
background: blue;
display: flex;
align-items: center;
}

复制代码

实现效果：

baseline：项目的第一行文字的基线对齐。

.box {
height: 700px;
background: blue;
display: flex;
align-items: baseline;
}

复制代码

三个盒子中设置不同的字体大小，可以参考右侧编辑器中的代码进行测试。

实现效果：

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

.box {
height: 300px;
background: blue;
display: flex;
align-items: stretch;
}
.box div {
/*不设置高度，元素在垂直方向上铺满父容器*/
width: 200px;
}

复制代码

21fanqie · 发表于 2024-7-27 22:19:07

flex属性，设置子元素相对于父元素的占比。

1、给子元素设置flex属性，可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后，其宽度属性会失效。

可以参考右侧编辑器的代码，测试效果如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>flex占比</title>
    <style type="text/css">
    .box {
        height: 300px;
        background: blue;
        display: flex;
    }

    .box div {
        width: 200px;
        height: 200px;
    }

    .box1 {
        flex: 1;
        background: red;
    }

    .box2 {
        flex: 3;
        background: orange;
    }

    .box3 {
        flex: 2;
        background: green;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">flex:1</div>
        <div class="box2">flex:3</div>
        <div class="box3">flex:2</div>
    </div>
</body>

</html>

		自动登录	找回密码
密码			立即注册

flex弹性盒子模型

相关帖子